Question

我正在使用“干净”的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

Answer 1

如果可以认为这更短，您可以尝试使用Object#assign来设置属性。

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

Answer 2

你说在不使用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);
}

你必须将这个帮助函数包含为“依赖”，但是你可以将它粘贴到你自己的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);
}

<button onclick="test()">Test</button>

缩短javascript multiple element.style。<property>语句

2 个答案: