Search code examples
javascriptcsselementopacityinnerhtml

How to change text opacity using innerHTML?


Hi i was just wondering if there was a way to change the opacity of text using innerHTML almost as a container...

var x = document.getElementById("myId");
x.innerHTML.style.opacity = .5;

??? maybe something like that? I had an idea to have a different class and just add that class to specific HTML but im trying to grab the html of an element, change the text opacity to a lighter shade, delete it from the element but keep it in a variable, add in new html, and then add the original html but i want the new html to be darker than the original so i cant change the opacity of the element otherwise it will effect all the text in the element. If anyone has any suggestions it would be greatly appreciated. I am trying to use only HTML, CSS, and Javascript so im trying to avoid any added libraries if i can help it. thank you.


Solution

  • You could changes the opacity of all childrens

    var childrens = document.getElementById("myId").children;
    
    for(var i = 0, length = childrens.length; i < length; i++) {
        childrens[i].style.opacity = 0.5;
    }