缩短javascript的多元素。样式。<；房地产>；声明

我正在使用“干净”的javascript（没有libs），我想知道如何缩短以下示例代码：

const element = document.createElement("div");
element.style.width = "100px";
element.style.height = 100px;
element.style.backgroundColor = "pink";
element.style.border = "1px solid black";
element.borderRadius = "20px";

当有足够的样式属性来处理它时，它就变成了这段恼人的代码。如果涉及到链接（如jQuery），我至少可以添加一些缩进，这样在查看代码时会更容易看到

因此，基本上我要求提供一个无依赖性的javascript建议，提供一个更短的方法来编写上述代码，或者提供一个更漂亮的风格来编写代码

谢谢，

---

CodeAt30

如果可以将其视为较短，则可以尝试使用设置属性

Object.assign(element.style, {  
                                width: '100px',
                                height: '100px',
                                backgroundColor: 'pink',
                                border:"1px solid black"
                             });

---

您说过在不使用jQuery的情况下使用css链接调用会很好。实际上，将一个简单的函数放在一起非常简单，可以在普通的老javascript中实现这一点

我为您创建了一个示例：

function createElement(type) {
    const elem = document.createElement(type);
    return {
        baseElement: elem,
        css: function(key, value) {
            this.baseElement.style[key] = value;
            return this;
        },
        toDOM: function() {
            return this.baseElement;
        }
    };
}

然后您可以这样使用：

function test() {
    var elem = createElement("div").css("width", "100px").css("height", "100px").css("backgroundColor", "pink").css("border", "1px solid black").css("borderRadius", "20px").toDOM();
    document.body.appendChild(elem);
}

您必须将这个helper函数作为一个“依赖项”包含进来，但由于您可以将它粘贴到自己的javascript中，所以我不认为它是一个真正的依赖项

在这里，您也可以看到它的实际作用：

函数createElement（类型）{
const elem=document.createElement（类型）；
返回{
基本元素：元素，
css：函数（键、值）{
this.baseElement.style[key]=值；
归还这个；
},
toDOM:函数（）{
返回此.baseElement；
}
};
}
功能测试（）{
var elem=createElement（“div”）.css（“宽度”、“100px”）.css（“高度”、“100px”）.css（“背景色”、“粉色”）.css（“边框”、“1px纯黑”）.css（“边框半径”、“20px”）.toDOM（）；
文件.正文.附件（elem）；
}

---

测试

使用类。。。还是全是动态的？嘿，这太好了。谢谢哦，这太棒了，它给出了代码本身中元素（对象）的一个非常清晰的视图，这主要是我想要的。