Question

这里有几行java脚本代码动态创建div元素。但我怀疑是在创建该元素之后，是否有任何简短的方法来分配多个css规则而不是一次又一次地输入（container.style）。

<script>
    (function(){
        window.onload = function(){
            var container = document.createElement('div');
            container.style.width = '500px';
            container.style.height = '200px';
            container.style.backgroundColor = 'red';
            container.style.margin = '0 auto';

            document.body.appendChild(container);
        }
    }());
</script>

Answer 1

使用CSS类并将该类分配给元素：

.MyClass {
   width: 500px;
   height: 200px;
   background-color: red;
   margin: 0 auto;
}

然后container.className = "MyClass";

Answer 2

您可以使用for循环迭代对象，逐个将属性应用于样式属性：

(function(){
    window.onload = function(){
        var container = document.createElement('div'),
            styles = {
                "width": "500px",
                "height": "200px",
                "backgroundColor": "red",
                "margin": "0 auto"
            },
            i;
        for (i in styles) {
            container.style[i] = styles[i];
        }

        document.body.appendChild(container);
    }
}());

值得注意的是，这比原始代码要长:-p如果将for循环包装在另一个函数中并重复使用该函数，它可能会很有用。如果您发现自己需要重复此操作，我强烈建议您使用jQuery（或ZeptoJS）并使用.css(…)来应用CSS。 jQuery在应用它们时对属性进行了几次转换...它将属性名称中的连字符更改为正确的驼峰外壳，进行更改以应用IE的正确属性或属性值等。它使编码更容易，任何未来代码维护者也将从中获益。

Answer 3

你可以这样使用

var container = document.createElement('div');
                container.setAttribute("id","div1");
                document.body.appendChild(container);

$("#div1").css({"width":"500px","height":"200px","background-color":"red"});

Demo

Answer 4

您可以编写自己的css函数：

<script>
    (function(){
        window.onload = function(){
            var container = document.createElement('div');
            css(container,
                {'width': '500px',
                 'height': '200px',
                 'backgroundColor': 'red',
                 'margin': '0 auto'});

            document.body.appendChild(container);
        }

        function css(element, style){
            for(key in style){
                if(style.hasOwnProperty(key)){
                    element.style[key] = style[key];
                }
            }
        }
    }());
</script>

然后，您可以将css()功能重新用于其他元素。

将多个css规则分配给javascript中的元素

4 个答案: