返回一个元素在香草中的CSS属性JS

Question

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

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

然而，在香草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

这这里指向事件object.you可以到以下

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?。答案如下，答案还包括一个示例代码片段，以获得使用JavaScript的CSS。

的element.style属性可以让你只知道 是在该元素定义为内嵌（编程，或元素的样式属性定义 ）的CSS属性，你应该得到的计算得出 风格。