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

Posted 2023-02-24

【中文标题】将样式添加到在 jquery 中 document.ready 之后加载的 div

【英文标题】：Add style to div which is loading after document.ready in jquery

【发布时间】：2015-11-29 02:01:10

【问题描述】：

我在 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">
--------

【问题讨论】：

你有插件文档的链接吗？

它看起来像一个 hack，但不是解决方案。为什么不在 CSS 中描述这条规则？

我正在使用 django 客户日期范围过滤器。

【参考方案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 

【讨论】：

一旦新元素具有在页面加载的 CSS 中定义的“日历框”类，该元素将遵循此规则，除非它被另一个规则覆盖！

该规则是否适用于具有 display:none; 的 div？在点击日历之前它是显示：无；一旦用户点击日历，它就会显示：块；并且上述样式不适用于类名或ID的div。

当然！但由于 display:none 它将是不可见的 :)

你能告诉我css不适用于我的div的所有可能原因吗？

它可能会被另一个 css 规则覆盖，我不能绝对确定.. 检查应用 css 的控制台