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

标签 javascript css dom html

为这个看似多余的问题道歉,但其他人似乎都在询问不同的情况,例如使用 JQuery。我正在尝试动态创建一个 div 并将现有的 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);
        }

最佳答案

在 vanilla JS 中,用于向元素添加类的属性是 className 而不是 class

试试这个:

div.className = "tile a";

关于javascript - 如何将现有的 CSS 类样式应用于动态创建的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12519471/

相关文章:

javascript - jQuery 验证 - .valid 方法第一次尝试验证失败

javascript - 自动滚动到 anchor 时的平滑效果

javascript - 获取 float 元素兄弟的最小 innerWidth

javascript - 防止谷歌地图使用涡轮链接多次加载

javascript - 使用 Javascript/jQuery 裁剪图像

css - 如何使用css在<tr>元素下生成虚线效果?

javascript - html/css/js 查找元素是否悬停在其他元素上

html - 如何在链接到 shadowbox vimeo 视频的缩略图上叠加播放按钮 png

html - 浏览器如何部分加载DOM和CSSOM?

javascript 事件无法识别我的函数