We normally use offset properties and style property of DOM objects to access their CSS properties. But we have problem in access the computed properties. Manipulating CSS of HTML elements is a very boring and hectic task. In this post I will provide all solutions and possibilities to access any CSS style property using JavaScript.
Auto Conversion
Browsers always convert percentage, em and pt into px before rendering. Similarly color names and rgb values are converted to hexadecimal codes.
“auto” and “initial” values of CSS properties
Some CSS properties can be assigned to “auto” value. When browser see “auto” value they calculate the value automatically according to some factors and assign to that property.
<div style="height: auto"></div>
Every CSS properties can be assigned to “initial” value. When browser see “initial” value they assign the property the default value. A CSS property can have “auto” as their default value, In that case using “initial” is same “auto” value.
<a style="color: initial"></a>
<!-- Height is calculated according to content. Default value of height is auto. -->
<div style="height: initial"></div>
What is Default Styles?
We don’t provide all CSS properties for every html element. But every HTML element must have all the CSS properties assigned. Therefore browser assign default values(styles) for the CSS properties. So every element in the DOM has all CSS styles set.
Offset Properties
For finding height and width of DOM element use offset properties because they are very accurate. They provide us final computed value.
Using style property
DOM elements contain a property called as style assigned to a Style object.
Using style property we can retrieve those property values which we have assigned using the style attribute of HTML tag. For other properties we get empty strings. We can set CSS property values using style property.
getComputedStyle()
getComputedStyle is used to retrieve value of any CSS property. getComputedStyle() returns the default value if value is not assigned manually(using external or internal stylesheets).
getComputedStyle function takes a Element and property name string as parameters. It returns CSSStyleDeclaration Object having the value of the property. If we provide null instead of property name then we get CSSStyleDeclaration object having all the computed styles.
We can access this function as globally, window.getComputedStyle or document.defaultView.getComputedStyle
console.log(window.getComputedStyle(document.querySelector("#myElement"), null));
<!-- Logs the whole CSSStyleDeclaration object which contains all background-color property its final computed values. -->
console.log(window.getComputedStyle(document.querySelector("#myElement"), "background-color"));
<!-- getPropertyValue takes property name and extracts its value from CSSStyleDeclaration. -->
console.log(window.getComputedStyle(document.querySelector("#myElement"), "background-color").getPropertyValue("color"));
Remember that we cannot set CSS property values using getComputedStyle because its only readable.
Its not supported in many versions on IE.
For more information on it read this.
currentStyle
currentStyle property contains all the final computed CSS values of a DOM element. Its an alternative to getComputedStyle function. Its supported only in all versions of IE. Every DOM element has this property.
Even currentStyle is read only property. Use style object for changing CSS values using JavaScript.
For more information on it read this.
Conclusion
In this we can access all manually assigned values and default assigned values. I will be updating this post as I find newer methods and techniques. Using JavaScript, properties of CSS are always retrieved and set as strings. Thanks for reading.
@narayanprusty
Leave a Reply