将样式添加到在 jquery 中 document.ready 之后加载的 div

Question

我在 django 中使用 calendar.js，我无法将样式“z-index:1000”（以便它正确显示日历）添加到类名为 calendarbox 的 div 中，它在页面之后加载加载。

我尝试了以下操作：

<script>
    $(document).ready(function(){
        $(".calendarbox").css("z-index", 1000);
    });
</script>

Calendarbox Div 在页面加载后加载。

CSS：

<div id="calendarbox0" class="calendarbox module" style="display: block; position: absolute; left: 2079px; top: 1340px;">
<div>
<div id="calendarin0" class="calendar">
--------

Answer 1

只需将此规则添加到 css 文件中：

CSS

.calendarbox { z-index:1000 }

检查以下示例。

$('#add').on('click', function() {
  $('body').append('<span class="newElem">New element!</span>');
});

.newElem { color:red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="add">Add new element</button>

注意

最好将所有样式收集到一个css文件中，而不是内联，所以在这里做一些修改（除非这个样式需要通过js计算）：

HTML

<div id="calendarbox0" class="calendarbox module">
<div id="calendarin0" class="calendar"> ...

CSS

.calendarbox {
  display: block;
  position: absolute;
  left: 2079px;
  top: 1340px;
}

.calendar { z-index:1000 }