Skip to main content
J
Jonny1-Visitor
1-Visitor
May 23, 2018
Question

Edit CSS Styles with JavaScript

  • May 23, 2018
  • 1 reply
  • 2148 views

Hello, 

 

I tried to cange the CSS Style with JavaScipt code but it does not work. What is wrong?

 

$scope.ShowClass = function() {
 document.getElementById('classname').style.display = "block";
}

$scope.HideClass = function() {
 document.getElementById('classname').style.display = "none";
}

 

1 reply

C
ClayHelberg18-Opal
18-Opal
May 23, 2018

Unfortunately, stylesheets don't work that way. The most direct approach is probably to identify the desired elements and modify their styles directly, something like this:

 

$scope.ShowClass = function () {

    var elems = document.getElementsByClassName('classname');

    for (var e in elems) {

        elems[e].style.display = "block";

    }

}

 

and similar for $scope.HideClass()

 

If you really need to modify the class style rules, rather than just changing the styling of affected elements, you might find some useful information here:
https://www.quirksmode.org/dom/changess.html

--Clay

Terms & ConditionsAccessibility statement