javascript - 在 JS 中包含 CSS 多属性的正确语法

Question

我有这个：

document.getElementById('returning_user_search_box').style.backgroundColor='yellow';

现在我需要添加更多这样的样式：

左边距：-280px；边距顶部：-280px；最小宽度：550px；

我尝试了一些这样的组合，但没有成功：

document.getElementById('returning_user_search_box').style.innerHTML='{margin-left:-280px; 边距顶部：-280px；最小宽度：550px;}';

有什么线索吗？

Answer 1

您必须单独设置它们：

var style = document.getElementById('returning_user_search_box').style;

style.backgroundColor = 'yellow';
style.marginLeft      = '-280px';
style.marginTop       = '-280px';
style.minWidth        = '550px';

Answer 2

您必须单独设置它们。您可以创建 CSS 类并在 javascript 中绑定这些类。另一种选择是使用支持多属性 CSS 样式的 jQuery。

Answer 3

您可以使用元素对象的cssText属性在元素上设置多种样式。style您还可以附加到它以不破坏现有样式。

var style = document.getElementById('returning_user_search_box').style;

style.cssText += "margin-left: -280px; min-width: 550px;";

http://jsfiddle.net/hQnTX/1/

您还可以遍历您拥有的对象（顺便说一句，这在语法上是不正确的）并单独分配属性：

var properties = {"margin-left":"-280px", "margin-top":"-280px", "min-width": "550px"},
for (prop in properties) {
    if (properties.hasOwnProperty(prop)) {
        style[prop] = properties[prop];
    }
}

http://jsfiddle.net/hQnTX/

Answer 4

一般的经验法则是CSS属性foo-bar变成JavaScript属性fooBar，并且前面的连字符被删除（例如 for -webkit-*）。

这意味着你可以为它做一个简单的转换函数

function toJSProp(cssAttrib) {
    return (
        cssAttrib
            .replace(/^-+/, '')
            .replace(/-([a-z])/g, function ($0, $1) {
                return $1.toUpperCase();
            })
    );
}

接下来，创建一个函数来循环一个对象并将给定元素的样式设置为它的属性

function style(element, cssObject) {
    var i;
    for (i in cssObject) element.style[toJSProp(i)] = cssObject[i];
}

现在您可以通过轻松传递一个对象来应用许多样式

style(document.body, {
    'color': 'red',
    'background-color': 'black'
});