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 <div id="demo_cssText">Patrick Starr</div>

The JavaScript for injecting the styling (function (d) { //self-invoking function var elm = d.getElementById("demo_cssText"); //the element //the method elm.style.cssText="font-size:80px;color:#eee;text-shadow:2px 2px 5px #888;text-align:center;margin:50px 0;line-height:80px"; }(document));

Or just declaring the method: var d = document, //document variable elm = d.getElementById("demo_cssText"); //the element //the method elm.style.cssText="font-size:80px;color:#eee;text-shadow:2px 2px 5px #888;text-align:center;margin:50px 0;line-height:80px";

Complete HTML (with just declaring the method): <!-- HTML element --> <div id="demo_cssText">Patrick Starr</div> <!-- the JavaScript --> <script> var d = document, //document variable elm = d.getElementById("demo_cssText"); //the element //the method elm.style.cssText="font-size:80px;color:#eee;text-shadow:2px 2px 5px #888;text-align:center;margin:50px 0;line-height:80px"; </script>
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: $("selector_class/ID").css({ "font-size" : "20px", "color" : "lime", "padding-right" : 8px //and so on... });

---

Reference:

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