You will learn how to get an element’s CSS display value in JavaScript using several methods. This is an essential skill when working with element’s CSS in Javascript.
Get an element’s CSS display value in JavaScript
Using window.getComputedStyle()
This function returns an object that contains the values of all CSS properties of the element passed to its parameter:
Syntax:
getComputedStyle(element)
Parameter:
- element: The element you want to get CSS display value.
You can use the getComputedStyle(element) to get a list of CSS properties and then access the property you want to get the value. For example:
<html>
<head>
<style>
p {
color : red;
display : inline;
}
</style>
</head>
<body>
<p id = "p">Example: </p>
<button id = "button" style = "font: 1rem sans-serif;display: inline"> LearnShareIT </button>
</body>
</html>To get the usage and syntax of the getElementById() function, you can read this page.
let button = document.getElementById("button");
let p = document.getElementById("p");
let buttonCSS = window.getComputedStyle(button);
console.log(buttonCSS.display);Output:
inline-block
The logic behind this solution is very simple. Because we want to get the display value in the CSS’s properties, we need to achieve the CSS’s properties of the element first. This is done by using the window.getComputedStyle() method. After you get the object containing the CSS properties, we then access the ‘display’ property through the object to get its display value. If you want to see the return object by the method, then you can log out the buttonCSS variable:
The object returned by the method has a myriad of properties instead of some properties you have declared or expected. That is the reason why we shouldn’t print the object. Instead, we just access the ‘display’ property to get its value. In addition, this method can be called without the ‘window.’ before it:
let button = document.getElementById("button");
let p = document.getElementById("p");
console.log(getComputedStyle(button).display);
console.log(getComputedStyle(p).display);Output:
inline-block
inline
Using the element’s style property
Assume you have an element. You can access its style’s property easily by this syntax:
element.style
This property, called the CSSStyleDeclaration interface, returns an object that includes CSS properties of an element.
let button = document.getElementById("button");
console.log(button.style);Output:
To get an element’s CSS display value, all you have to do is accessing the display property in style:
let button = document.getElementById("button");
let p = document.getElementById("p");
console.log(button.style.display); //print ‘inline’
console.log(p.style.display); //print nothingYou may be surprised by the result in the above example as you expected the last command to print its property in the CSS, which is display : inline. That is because the returned objects in the two solutions are completely different. In short, the getComputedStyle() method will return an object that also has CSS properties (the properties in the style tag you declared in the head), whereas element.style does not because it only has the properties you declared inside that element tag.
Summary
We have learned how to get an element’s CSS display value in JavaScript using two different approaches. With the help of our instructions in this tutorial, you can easily succeed in achieving the goal. Good luck for you!
Maybe you are interested:
- Add attribute to multiple Elements in JavaScript
- Remove CSS Style Property from an Element using JavaScript
- Check if Element’s Style contains CSS property using JavaScript
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R