有沒有辦法在 JavaScript 中制作自定義 CSS 屬性？

Question

有沒有辦法在 JavaScript 中創建自定義 CSS 屬性？

例子

注意：此代碼不起作用，它只是顯示我正在尋找的那種東西。

我正在尋找這樣的東西：（這並不完全是這個意思，只是一般的想法）

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>

結果將顯示在此代碼段中

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

附加問題

作為這個問題的一個附加部分，自定義 CSS 函數、CSS 值（根據一個或多個事物保存一個值，例如值unset和inherit ）、CSS 選擇器，甚至可能是 CSS 單元呢？

Answer 1

我覺得在 JavaScript 中將 CSS 添加到 div 的更簡單方法是使用.id或.classList.add函數。

JavaScript 文件：

//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 文件：

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