QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Changing CSS Style using JavaScript

Changing CSS Style using JavaScript

css-styles

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.

<!-- Here browser calculates the height according to the content inside div -->
<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.

<!-- Default color code is assignd -->
<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.

alert("The visible height of advertising banner is : " + document.getElementById("adsBar").offsetHeight);

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

<!-- Logs the whole CSSStyleDeclaration object which contains all CSS properties with their final computed values. -->
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.

var x = document.getElementById("qnimate").currentStyle["color"];

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.

May 6, 2014Narayan Prusty
Storing Meta Data In HTML Tags Using data-* AttributesData URI Tutorial

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image6 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Auto Conversion
  • “auto” and “initial” values of CSS properties
  • What is Default Styles?
  • Offset Properties
  • Using style property
  • getComputedStyle()
  • currentStyle
Related Articles
  • Creating a Percentage of Webpage Scrolled Indicator
  • HTML Table Designing and Best Practices with Examples
  • CSS3 :before and :after Psuedo-Elements and Generated Content
  • Making HTML Underlying Elements Clickable Using pointer-events CSS Property
  • Create an Frontend Editor with Code Highlighting and Execution
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license