Rückgabe css -Eigenschaft eines Elements in Vanille JS

Question

In jQuery kann die CSS-Eigenschaft eines Elements mit Methoden zurückgegeben werden. Ein Beispiel ist die width() Methode, die die Breite eines Elements zurückgibt, wie folgt aus:

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

jedoch in Vanille JS, habe ich versucht, den folgenden Code, aber es zurückgegeben null:

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

Wie kann Ich mache es richtig? Ich hoffe, dass mir jemand dabei helfen könnte.

Answer 1

Verwenden Sie getComputedStyle, um die Breite zu erhalten. Hier

ist ein Ausschnitt

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

DEMO

Answer 2

diese hier weist auf Ereignis object.you kann es zu folgenden

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>

Hoffe es hilft

Answer 3

Ähnliche Fragen wurden früher, How to get an HTML element's style values in javascript? gestellt. Die Antwort ist wie folgt, die Antwort enthält auch ein Beispielcode-Snippet, um CSS mit JavaScript zu erhalten.

Die element.style Eigenschaft können Sie nur die CSS-Eigenschaften kennen, die als inline definiert wurden in diesem Element (programmatisch oder im Stil-Attribut des Elements definiert ist), sollten Sie das bekommen berechnet Stil.