バニラJSの要素のCSSプロパティを返す

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>

にイベントにそれをすることができますポイント10

希望します。

Answer 3

似たような質問が以前にあったのですが、How to get an HTML element's style values in javascript?。 ansは以下のとおりですが、答えにはJavaScriptを使用してCSSを取得するサンプルコードスニペットも含まれています。

element.styleプロパティは、 は、その要素にインラインのように定義（プログラム的に、または要素のstyle属性に 定義された）された唯一のCSSプロパティを知ることができます、あなたが取得する必要 スタイルを計算しました。