设置CSS类后，Javascript无法获取样式

javascript unable to get style after setting css class

本文关键字：获取 样式 Javascript CSS 类后 设置      更新时间：2023-09-26

我有一个单元格类

  .cell {
    width:30px;
    height:30px;
  }
在我的createCell函数中: 
  var createCell = function(id) {
    var div = document.createElement('div');
    div.id = id;
    div.className = 'cell';
    div.addEventListener('click', function() {
      div.style.background = pickedColor;
    });
    document.getElementById('gridArea').appendChild(div);
  }

正如你所看到的，我已经将className分配给'cell'。在调用这个函数之后，我调用

document.getElementById(id).style.width

返回空字符串"

为什么会这样?我如何在分配className后立即检索值?

您需要使用getComputedStyle来获取来自CSS的样式。.style只访问DOM元素的样式属性。

width = getComputedStyle(document.getElementById(id)).width;

如果你的底层目标是访问元素的宽度，你应该使用它的。offsetwidth属性。

style.width只有在使用style属性设置时才有值，而不是通过应用CSS类。

试试document.getElementById(yourIdHere).offsetWidth

不能将id参数赋值为实际元素的id。

你需要做的是，

div.id = id

编辑1

你需要使用getComputedStyle .

alert(getComputedStyle(div).width);

JSFiddle显示了如何。

http://jsfiddle.net/kvohdnbn/

相关文章：