Javascript“对象”不保留css值

Javascript "object" not retaining css values

本文关键字：保留 css 对象 Javascript      更新时间：2023-09-26

我通过以下函数定义一个javascript"对象"：

function Window(vars) {
    this.div = $("<div/>", {
        id: vars.id,
        class: vars.styles + " box text",
        css: {
            top: vars.top,
            left: vars.left
        }
    });
    this.div.appendTo( $("body") );
    // more stuff happens..

如您所见，Window有一个 div 属性，它是一个 jQuery 对象。在它的实例化中，我声明了 CSS 类框和文本。文本并不重要，它只是字体的东西。但是，这是 CSS for 框。

.box {
 z-index: 1;
 position: absolute;
 background: #222222;
 min-width: 10%;
 text-align: center;
 padding: 5px;
}
.nav-extension {
 z-index: 3;
 padding: 8px;
 background: #000000;
 position: absolute;
 -moz-border-radius-bottomright: 5px;
 -moz-border-radius-topright: 5px;
 border-bottom-right-radius: 5px;
 border-top-right-radius: 5px;
}

框在 Z 索引 1 处是绝对的，另一个带有导航扩展名的div 在页面上的其他地方，也是绝对的，在 z-index 3 处。但是，当我将 Window 对象添加到我的页面时，它出现在带有导航扩展的任何内容上方。所有其他 CSS 属性（如背景）仍然有效。

我尝试更改 z-index，我在我已经使用的"css"部分中实例化div，但这也不起作用。什么给？

编辑

此外，我已经检查了带有框的div 和带有 Firefox 导航扩展的div，"样式"选项卡表明它们仍然具有预期的 z-index（未被覆盖）。

#2：将vars.class更改为vars.styles。

你能给我们一些 DOM，好吗？看起来您的框和导航扩展div 处于不同的上下文中。非静态位置设置一个新的上下文，相对于该上下文，内部的所有z-index都已处理。一个简单的小提琴来演示：http://jsfiddle.net/3KTyz/

<body>
    <style>
        .box { z-index:1; }
        .nav-extension { z-index:3; }
    </style>
    ...
        <div id="context" style="position:relative"><!-- or absolute or fixed -->
             ...
                 <div class="nav-extension"><!--
                 will be positioned +3 relatively to other elements in #context
                 -->...</div>
        </div>
    <div class="box"><!--
    will be above #context, which has (implicit) z-index:0
    -->...</div>
</body>

要使导航扩展显示在框上方，您将

  • 将 #context（或其父项之一）设置为高于 box 或
  • 将导航扩展div移出任何上下文
class是

JavaScript中的保留字，不能用作属性或变量名称，也许这是罪魁祸首。

相关文章：