There are different ways to get the style of an HTML element using Javascript. The typical way that developers use to access styles of an element is the HTMLElement.style property. It is the simplest way to access style properties. However, the HTMLElement.style property has a limitation that can affect your code if you do no account for it. The HTMLElement.style property only accesses inline styles of an element, that is, styles that are specified in the style attribute of the element’s tag on the webpage. This creates a problem for most situations where the style is specified in a separate stylesheet CSS file or in a CSS style declaration in the head of the webpage. Fortunately, there is a simple way to deal with this in Javascript.
Understanding the Use Case
The typical scenario is demonstrated in the following CSS code in a separate CSS file. It defines a class, maybe-hidden, that hides an element by setting the display to ‘none’, and gives it a background color:
|
1 2 3 4 |
.maybe-hidden { display: none; background-color: #E3C117; } |
The following HTML code creates a button, and two paragraphs. The second paragraph will be hidden once the css file loads in the page:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Testing the EFLP Javascript</title> <link rel="stylesheet" href="css/style.css" type="text/css" /> <script src="js/script.js" type="text/javascript"></script> </head> <body> <button id="mybtn">Reveal</button> <p>Press the button to reveal the sentence below:</p> <p class="maybe-hidden">I am here.</p> </body> </html> |
And the following Javascript code adds functionality to the button, such that if the button is clicked, it checks if the element with class, maybe-hidden, has its display property set to ‘none‘, and it if does, it changes it to ‘block‘, which essentially shows the element on the page:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
document.addEventListener("DOMContentLoaded", function(event) { var btn = document.getElementById('mybtn'); btn.addEventListener('click', function(event) { var elem = document.querySelector('.maybe-hidden'); if (elem.style.display == 'none') { elem.style.display = 'block'; } } ); } ); |
Examining the code at face value, it has no syntax errors, and the logic (although simple for this demonstration) seems correct. The only problem is that when you click the button nothing will happen. The reason why nothing happens is because elem.style.display does not have a value. It is doesn’t exist. Although the display style property is set in the stylesheet, the issue is that there is no inline display style for that element.
Accessing All Sources of an Element’s Style
Since an element’s style can be altered from a CSS style declaration block located in another file or in the HTML file where the element is declared, we can’t rely on HTMLElement.style alone to access all its style properties. Fortunately, we can use the CSSStyleDeclaration interface available in Javascript to access all the style related information for an object. This interface is available through the window.getComputedStyle() method in the Javascript Window API.
The window.getComputedStyle(element) method returns a live read-only CSSStyleDeclaration object for the specified element, which allows us to access all of the element’s style information, and it automatically updates if the styles are changed in real time. Once we get this object we can call the CSSStyleDeclaration.getPropertyValue(property) to access the element’s style property.
So, let’s update our coding example to demonstrate the solution to properly accessing the style property of an element:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
document.addEventListener("DOMContentLoaded", function() { var btn = document.getElementById('mybtn'); btn.addEventListener('click', function(event) { var elem = document.querySelector('.maybe-hidden'); var compstyle = window.getComputedStyle(elem); if (compstyle.getPropertyValue('display') == 'none') { elem.style.display = 'block'; } } ); } ); |
As the changes to lines 7-8 in the above example shows, we can substitute:
if (elem.style.display == 'none')
with:
if (window.getComputedStyle(elem).getPropertyValue('display') == 'none')
and get an accurate value for that element’s display style property. Of course, this is not limited to the display property, but applies to any style property of any element.
References
- HTMLElement.style – MDN Web Docs [https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style]
- Window.getComputedStyle() – MDN Web Docs [https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle]
- CSSStyleDeclaration – MDN Web Docs [https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration]
