Question

为这个看似多余的问题道歉，但其他人似乎都在询问不同的情况，例如使用JQuery。我正在尝试动态创建一个div＆amp;将现有的CSS样式应用于它，但div没有采用该样式。任何提示都非常感谢：

    <style>
        div.tile {
            position: absolute;
            overflow: hidden;
            background:  rgba(1,1,0,1);
            width: 400px;
            height: 400px;
        }
        .a { left: 2cm; top: 2cm; z-index: 1; }
        .b { left: 4cm; top: 4cm; z-index: 2; }
    </style>
</head>
<body>
    <script type="text/javascript">

        createLayer(1);

        function createLayer(layerIndex){
            var div = document.createElement('div');
            div.id = "div"+layerIndex;
            div.class = "tile a";
            document.body.appendChild(div);
            var canvas = document.createElement('canvas');
            canvas.id     = "layer" + layerIndex;
            div.appendChild(canvas);
        }

Answer 1

在vanilla JS中，为元素添加类的属性为className而非class。

请改为尝试：

div.className = "tile a";

Answer 2

您应该做的是在函数运行后检查HTML，以确保正确应用该类。即使动态创建了CSS，CSS也将应用于匹配元素 - 除非元素没有被正确标记。我建议在Firefox中使用Firebug以确保你的div是正确的。

如何将现有的CSS类样式应用于动态创建的div？

2 个答案: