Friday, July 25, 2014

JavaScript and jQuery: Declaring Multiple CSS Properties

In JavaScript, this can be done by using style.cssText method.
Instead of repetitively writing elm.style.CSSproperty = "value"; many times, we can compact the coding like this:
elm.style.cssText = "font-weight:bold;text-align:center;font-size:2rem";

Let's use it in a demo.

Patrick Starr

That's the demo.


The HTML element

The JavaScript for injecting the styling

Or just declaring the method:

Complete HTML (with just declaring the method):
We can add as many CSS properties as we want with it.


jQuery version
In neat jQuery, we can use the css() method, then include the multiple CSS properties.

It's using plain object (an object of property-value pairs to set) to declare them:


Reference:
  • Explanation of cssText on W3Schools
  • jQuery API documentation for css() method

No comments:

Post a Comment

Tell me what you think...