can't access element style properties-CodePudding

I want to change some styles of my 'text' variable but somehow can't.

const bg = document.querySelector(".bg");
const text = document.querySelector('.loading-text');


let count = 0;

let interval = setInterval(blurr,30);

 function blurr() {
    if(count>99) {
        clearInterval(interval);
    }
    text.innerHTML = `${count}%`;
    text.style //here is the problem
    count  ;
};

Im new here, and new to javascript so go easy on me please :|

CodePudding user response：

What are you trying to do regarding the element styling? Are you trying to get the current value or set it?

In order to get some CSS styling property you can do as follows:

var color = text.style.color;

If you are trying to set/change it, you can do as follows:

test.style.color = 'green';

See this documentation for more information: https://www.w3schools.com/js/js_htmldom_css.asp

Edit: From what I can tell OP is trying to set the opacity on the element.

text.style.opacity = 0.01 * count;

See this working here: https://jsfiddle.net/84pohswj/

But if that is the case I would suggest you use CSS animations instead. There much better option for this. And use JS to assign the animation class: https://www.w3schools.com/css/css3_animations.asp

CodePudding user response：

if you want to change your opacity to 0.5 here is the code

text.style.opacity = "0.5";

I hope this helps.