为什么css中的z-index无法通过javascript访问

Question

我创建了一个Id标签按钮。当我点击它时，我希望它显示一个带有z-index的div。但是为什么z-index不能通过javascript访问：

var tag = document.getElementById('tag');
tag.onclick = function(){

   var tag_div = document.createElement("div");
   tag_div.id = "wow";
    document.body.appendChild(tag_div);
    tag_div.style.border = "1px solid black";
   tag_div.style.position = "absolute";
   tag_div.style.top = "200px";
   tag_div.style.left = "70px";
   tag_div.style.z-index = 1;
      return false;
}

Answer 1

样式表中的CSS规则使用连字符，CSS 属性使用驼峰大小写，因此您需要.zIndex

Answer 2

作为一般经验法则，包含连字符（用于javascript访问）的CSS样式将转换为camelCase。也就是说，z-index变为zIndex，就像background-color变为backgroundColor一样。

请参阅JavaScript and CSS：

  

在JavaScript中，backgroundColor对应于CSS属性background-color。 JavaScript不允许使用名称中的连字符，因此使用“camelCase”。

Answer 3

试试这个：

tag_div.style.zIndex = 1;

Answer 4

您的代码：

tag_div.style.z-index = 1;

由于连字符，这是无效的Javascript代码 - Javascript将连字符视为减号，并将其解释为减法，这将失败。

如果需要访问名称中包含连字符的对象属性，则必须使用以下语法：

obj['property-name']

这是所有JS属性的一般规则。

然而，特别是对于CSS属性，它们通常使用驼峰式名称而不是带连字符的名称暴露给Javascript（camel-case意味着没有连字符，但是用于连字符的新单词的大写字母），所以以下应该工作：

tag_div.style.zIndex = 1;

希望有所帮助。

Answer 5

所有具有破折号的CSS规则（background-image，z-index，margin-top）都可以使用camelCase属性值通过JavaScript访问，如：

div.style.backgroundImage
div.style.zIndex
div.style.marginTop

Answer 6

是：

tag_div.style.zIndex = 1;