Is there a way to make custom CSS properties in JavaScript?

Question

Is there a way to create custom CSS properties in JavaScript?

Example

Note: this code won't work, it's just showing the sort of thing I'm looking for.

I'm looking for something like this: (that doesn't mean exactly this, just the general idea)

JavaScript:

createCSSProperty("bg", function(property, change, attr1) {
  change.setBackground(attr1, function fail(data) { //This function would trigger if the value was invalid
    property.fail(data); //This would throw an warning that the property can't load
  });
}

HTML:

<div style="width: 40px; height: 40px; bg: #f00;">Red Background</div>

The result would appear as it does in this snippet

<div style="width: 40px; height: 40px; background: #f00;">Red Background</div>

Add-on question

As a bit of an add-on to this question, what about custom CSS functions, CSS values (that hold a value depending on one or more things, such as the values unset and inherit), CSS selectors, and maybe even CSS units?

Answer 1

I feel like an easier way to add CSS to divs in JavaScript would be to use the .id or .classList.add functions.

JavaScript File:

//Creates the div
var div = document.createElement("div");
//Sets the text in the div
div.innerHTML = "Red Background";
//Applies Id and Class to the div
div.id = "customCSSId";
div.classList.add("containers");
//Adds the div to the html page
document.body.appendChild(div);

CSS File:

#customCSSId{
    width: 40px; 
    height: 40px; 
}
.containers {
    background: #f00;
}