Question 246099 in Html Question posted in
Some basic documentation can be found here.

Lowercase letters in javascript html object

I would like to dynamically raise or lower individual letters in my label. Currently, I am supersetting the text for the elements:
let element = document.getElementById('xxx') element.textContent = 'Label'

I tried using <sup>2</sup> oder <sub>.
Unfortunately this has no effect. Anyone have an idea how I can get this solved?

Tags:

3

Answers


  1. 0

    To dynamically raise or lower individual letters in a label using JavaScript and HTML, you can use HTML’s and tags to superscript and subscript specific characters. Here’s a complete solution to your problem:

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Letter Positioning</title>
</head>
<body>
    <label id="xxx">Label</label>

    <script>
        // Function to raise individual letters in a label
        function raiseLetters(labelId) {
            const label = document.getElementById(labelId);
            const text = label.textContent;
            let supText = '';

            for (let i = 0; i < text.length; i++) {
                supText += `<sup>${text[i]}</sup>`;
            }

            label.innerHTML = supText;
        }

        // Function to lower individual letters in a label
        function lowerLetters(labelId) {
            const label = document.getElementById(labelId);
            const text = label.textContent;
            let subText = '';

            for (let i = 0; i < text.length; i++) {
                subText += `<sub>${text[i]}</sub>`;
            }

            label.innerHTML = subText;
        }

        // Example usage:
        // Call the functions to raise or lower letters
        raiseLetters('xxx'); // To raise letters
        // lowerLetters('xxx'); // To lower letters (comment this line if not needed)
    </script>
</body>
</html>

    In this solution, we have two functions, raiseLetters and lowerLetters, that take the id of the label element as an argument. These functions iterate through each character in the label’s text and wrap it with or tags, effectively raising or lowering individual letters.

    You can call these functions as needed to dynamically modify the positioning of letters in your label. Uncomment the lowerLetters function if you want to lower the letters instead.

    Login or Signup to reply.
  2. 0

    You could create two css classes, one to superscript and one to subscript a letter, like shown here.
    Make sure to put the letters you want to change individually into separate elements that you can address individualy like:

    <span id="letter1">L</span>
<span id="letter2">a</span>
<span id="letter3">b</span>
<span id="letter4">e</span>
<span id="letter5">l</span>

    Then you can toggle the classes for the letters you want with: document.getElementById("letter1").classList.toggle("sub") or document.getElementById("letter1").classList.toggle("sup").

    (Make sure to use your correct class names and ids)

    Login or Signup to reply.
  3. 0

    We are in Angular, so we define variables in .ts and use this variables in the .html

    text="Label"
letterClass:boolean[]=[];

    <span *ngFor="let letter of text.split('');let i=index" 
          [class.upper]="letterClass[i]">
       {{letter}}
    </span>

    Then you can use in .ts

      this.letterClass[2]=true

    Or in .html

    <button (click)="letterClass[2]=!letterClass[2]">click</button>

    And your letter in position 3 have the class "upper"

    e.g. this stackblitz

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search