Question

在jQuery中，可以使用方法返回元素的css属性。一个例子是返回元素宽度的width()方法，如下所示：

$('div').click(function() {
    alert($(this).width());
});

然而，在vanilla JS中，我尝试了以下代码，但它返回null：

document.querySelector('div').onclick = function() {
    alert(this.style.width);
}

如何使其正确？我希望有人可以帮助我。

Answer 1

使用getComputedStyle获取宽度。

这是一个片段

document.querySelector('div').onclick = function() {
var width = window.getComputedStyle(this,null).getPropertyValue("width");
    alert(width);
}

DEMO

Answer 2

此此处指向事件对象。您可以将其转到以下

window.onload = function() {
  document.querySelector('div').addEventListener('click', function(event) {
    getWidth(event)
  });
}

function getWidth(event) {

  console.log(event.target.style.width);
}

<div style="width:300px">
  hellow
</div>

希望有所帮助

Answer 3

早些时候曾提出类似的问题How to get an HTML element's style values in javascript?。 ans如下所示，答案还包括使用JavaScript获取css的示例代码段。

element.style 属性让您只知道那些CSS属性在该元素中定义为 inline （以编程方式或定义在元素的style属性中，你应该得到计算式

返回vanilla JS中元素的css属性

3 个答案: