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

Correct syntax for include CSS multi property in JS

本文关键字：语法 属性 包含 CSS JS      更新时间：2023-09-26

我有这个：

document.getElementById（'returning_user_search_box'）.style.backgroundColor='yellow'；

现在我需要添加更多的样式，比如：

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

我尝试过这样的组合，但没有成功：

document.getElementById（'returning_user_search_box'）.style.innerHTML='｛左边距：-280px；上边距：-280px；最小宽度：550px；｝'；

有线索吗？

您必须分别设置它们：

var style = document.getElementById('returning_user_search_box').style;
style.backgroundColor = 'yellow';
style.marginLeft      = '-280px';
style.marginTop       = '-280px';
style.minWidth        = '550px';

您必须分别设置它们。您可以创建CSS类，然后用javascript绑定这些类。另一种选择是使用支持多属性CSS样式的jQuery。

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

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/

一般经验法则是CSS属性foo-bar变为JavaScript属性fooBar，并删除前面的连字符（例如-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'
});
相关文章：