0

I am trying to remove the display:block property in the given css class using javascript.

This is the Code

<!DOCTYPE html>
<html>
<head>
<style>

.abc{
display:block;
color:green;
font-weight:bold;
text-decoration:Underline;
}

</style>
</head>
<body>
<h1>The removeProperty() Method</h1>

<p class="abc">Click the button to remove the color property.</p>


<button onclick="myFunction()">Remove Property it</button>


<script>
function myFunction() {
  var d1 = document.getElementsByClassName('abc');
  d1.style.removeProperty('display');
}
</script>
</body>
</html>

not able to achieve! Did I miss something?

Apprentice
  • 33
  • 1
  • 4
  • You could try dynamically changing the class of the element, or overwriting the style dynamically as two alternative solutions. – Other Me Apr 27 '21 at 15:57
  • Note that `display: block` is a CSS style, not a class. – Code-Apprentice Apr 27 '21 at 15:58
  • Also does getElementsByClassName return an array-like, HTMLCollection? – Other Me Apr 27 '21 at 15:58
  • To solve the problem presented in my previous comment your variable `d1` is actually an HTMLCollection not an element so we need to loop through the HTMLCollection which is for many purposes just like an array. `for(const element of d1) {...}` then we need to perform the same operation on each element in the array `element.removeProperty...` – Other Me Apr 27 '21 at 16:08
  • I understand, I tried looping too.. ```function myFunction1() { var elems = document.getElementsByClassName('abc'); for(var i = 0; i < elems.length; i++) { elems[i].style.removeProperty('color'); } } ``` but still not able to achieve it. Am i going wrong somewhere! – Apprentice Apr 28 '21 at 05:37

0 Answers0