Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at CFUNITED 2008 (Washington, D.C.) with: Katie Maher
Ben Nadel at CFUNITED 2008 (Washington, D.C.) with: Katie Maher

Using style.setProperty() To Keep CSS Property Names Consistent In JavaScript

By Ben Nadel on

This morning, while reading an article on theming Angular components by Austin McDaniel, I saw something that I don't think I've ever seen before. Austin was using a .setProperty() method to define an element's CSS properties in JavaScript. Historically, I've mutated the style properties directly using camel-case values. But, one thing that struck me about the .setProperty() approach is that it allows you to use kebab-case, keeping your CSS property names the same in both the CSS and your JavaScript. This is not a critical differentiator; but, it certainly piqued my curiosity (and frustrated me in so much as I didn't know that this method existed). As such, I wanted to give it a quick try.


 
 
 

 
 
 
 
 

Run this demo in my JavaScript Demos project on GitHub.

View this code in my JavaScript Demos project on GitHub.

To experiment with the style.setProperty() method in JavaScript, I put together a small demo in which we can alternate the active styles on a given element. One version of the styles will be set using camel-case properties directly on the style object. And, the other version of the styles will be set using kebab-case properties and the setProperty() method:

  • <!doctype html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8" />
  • <title>
  • Using style.setProperty() To Keep CSS Property Names Consistent In JavaScript
  • </title>
  •  
  • <link rel="stylesheet" type="text/css" href="./demo.css">
  • </head>
  • <body>
  •  
  • <h1>
  • Using style.setProperty() To Keep CSS Property Names Consistent In JavaScript
  • </h1>
  •  
  • <p>
  • <a class="use-properties">Use Style Properties</a>
  • &mdash;
  • <a class="use-set-property">Use Style setProperty()</a>
  • </p>
  •  
  • <div class="box">
  • Goodbye cruel world.
  • </div>
  •  
  • <script type="text/javascript">
  •  
  • // Gather DOM references.
  • var useProperties = document.querySelector( ".use-properties" );
  • var userSetProperty = document.querySelector( ".use-set-property" );
  • var box = document.querySelector( ".box" );
  •  
  • // Setup our action handlers.
  • useProperties.addEventListener( "click", handleUseProperties, false );
  • userSetProperty.addEventListener( "click", handleUseSetProperty, false );
  •  
  • // --------------------------------------------------------------------------- //
  • // --------------------------------------------------------------------------- //
  •  
  • // I set the box styling using the style object properties.
  • function handleUseProperties( event ) {
  •  
  • // Note the use of CAMEL-CASE.
  • box.style.backgroundColor = "#333333";
  • box.style.border = "2px solid #999999";
  • box.style.borderRadius = "4px 4px 4px 4px";
  • box.style.color = "#ffffff";
  • box.style.cssFloat = "left"; // CAUTION: Using "cssFloat", not "float".
  •  
  • // Testing setting and destroying of properties (null destroys).
  • box.style.zIndex = null;
  • box.style.zoom = "1";
  •  
  • }
  •  
  • // I set the box styling using the style's setProperty() method.
  • function handleUseSetProperty( event ) {
  •  
  • // Note the use of KEBAB-CASE.
  • box.style.setProperty( "background-color", "#fafafa" );
  • box.style.setProperty( "border", "2px solid #cccccc" );
  • box.style.setProperty( "border-radius", "4px 4px 4px 4px" );
  • box.style.setProperty( "color", "#333333" );
  • box.style.setProperty( "float", "right" );
  •  
  • // Testing setting and destroying of properties (null destroys).
  • box.style.setProperty( "z-index", "1" );
  • box.style.setProperty( "zoom", null );
  •  
  • }
  •  
  • </script>
  •  
  • </body>
  • </html>

As you can see, there's very little going on here. The focal point of this demo is the code that actually defines the properties. When using the .setProperty() method, we can keep our CSS property names the same across our CSS and our JavaScript. This pertains to both the casing of the properties as well as their actual names. Take, for example, the "float" property. When setting it directly, we have to use "cssFloat". But, when setting it using .setProperty(), we can use "float", just like we do in our CSS files.

Now, if we run this code and toggle the styles using .setProperty(), we get the following output:


 
 
 

 
 Using the .setProperty() method in JavaScript to set CSS property values, consistently with your CSS files. 
 
 
 

As you can see, the .setProperty() method works perfectly well.

To be clear, I am not recommending that everyone should go out and start using the .setProperty() method instead of mutating the style object directly. But, I am pointing out that this method exists; and, that the consistency it provides does have a certain amount of gravity to it. If nothing else, it's just another tool in the old tool-belt. My mental model is now one step closer to being complete.



Looking For A New Job?

Ooops, there are no jobs. Post one now for only $29 and own this real estate!

100% of job board revenue is donated to Kiva. Loans that change livesFind out more »

Reader Comments

@All,

So, from what I've been reading, it looks like .setProperty() and its sibling .getPropertyValue() may be the only way to programmatically set and get CSS custom properties (ie, variables). Not entirely sure that's an accurate statement; but, everything that I am reading seems to use these methods for CSS variables.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
NEW: Some basic markdown formatting is now supported: bold, italic, blockquotes, lists, fenced code-blocks. Read more about markdown syntax »
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.