How to change an attribute value in CSS through JS?-CodePudding

I have this code:

<script>
radius.style.setproperty('display');
</script>

<style>
.radius{
display: none;
}
</style>

<body>
<p id="radius"> Enter the radius</p>
</body>

What I intend to do here is that, by default, the paragraph has display=none. I want to display this paragraph through JS when some specific condition is met. But the problem is that using above code, I am not able to accomplish what I want. Please suggest what should have been done instead?

CodePudding user response：

at the first you should get dom, after that change style attr. like this for example:

<html>
  <body>
    <p id="p2">Hello World!</p>
    <script>
      document.getElementById("p2").style.color = "blue";
    </script>
  </body>
</html>

CodePudding user response：

Try

 <html>
    <body>
    <p id="radius"> Enter the radius</p>
    


    <script>
    let radius = document.getElementById("radius");
        if(condition == true){
             radius.style.display = "block";
        }else{
             radius.style.display = "none";
             }
    </script>

</body>
</html>

CodePudding user response：

You can set element style in javascript

element.style.cssPropertyInCamelCase = 'value'

Example

const element = document.getElementById('id')

element.style.display = 'none'