Question

我有一个细胞类

  .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分配给＆＃39; cell＆＃39;。调用此函数后，我调用

document.getElementById(id).style.width

返回空字符串＆＃34;＆＃34;

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

Answer 1

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

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

Answer 2

您不会将id参数指定为实际元素的id。

你需要做的就是这个，

div.id = id

修改1

您需要使用getComputedStyle。

alert(getComputedStyle(div).width);

JSFiddle显示了如何。

http://jsfiddle.net/kvohdnbn/

Answer 3

如果您的基本目标是访问元素的宽度，则应使用其.offsetWidth属性。

如果使用style.width属性设置了一个值，那么

style将只有一个值，而不是通过应用CSS类。

尝试document.getElementById(yourIdHere).offsetWidth

设置css类后，javascript无法获得样式

3 个答案: