Question

我有这个：

的document.getElementById（ 'returning_user_search_box'）style.backgroundColor = '黄色';

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

保证金左：-280px;边距：-280px;最小宽度：550px;

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

的document.getElementById（ 'returning_user_search_box'）style.innerHTML ='{保证金左：-280px;边距：-280px; min-width：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，并删除前面的连字符（例如{{1} }）。

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

-webkit-*

接下来，创建一个函数来遍历 Object 并将给定元素的 style 设置为它的属性

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];
}

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

4 个答案: