0

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

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;
}
4

6 回答 6

11

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

于 2013-09-06T14:38:30.690 回答
4

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

请参阅JavaScript 和 CSS：

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

于 2013-09-06T14:39:52.407 回答
2

尝试这个：

tag_div.style.zIndex = 1;
于 2013-09-06T14:38:39.387 回答
2

你的代码：

tag_div.style.z-index = 1;

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

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

obj['property-name']

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

然而，特别是对于 CSS 属性，它们通常使用驼峰式名称而不是连字符名（驼峰式表示没有连字符，但对于连字符本来应该是新词的新单词大写字母）公开给 Javascript，因此以下应该有效：

tag_div.style.zIndex = 1;

希望有帮助。

于 2013-09-06T14:41:08.983 回答
1

所有带有破折号（背景图像、z-index、margin-top）的 CSS 规则都可以通过 JavaScript 使用 camelCase 属性值访问，例如：

div.style.backgroundImage
div.style.zIndex
div.style.marginTop
于 2013-09-06T14:40:10.117 回答
0

这是：

tag_div.style.zIndex = 1;
于 2013-09-06T14:38:49.457 回答