Ich weiß, dass ich set einen CSS-Wert über JavaScript setzen kann, wie zum Beispiel:
document.getElementById('image_1').style.top = '100px';
Aber kann ich erhalten einen aktuellen bestimmten Stilwert? Ich habe gelesen, wo ich den gesamten Stil für das Element erhalten kann, aber ich möchte nicht den gesamten String analysieren müssen, wenn ich nicht muss.
Sie können getComputedStyle()
verwenden.
var element = document.getElementById('image_1'),
style = window.getComputedStyle(element),
top = style.getPropertyValue('top');
jsFiddle .
Mit der Eigenschaft element.style können Sie nur die CSS-Eigenschaften kennen, die in diesem Element als Inline definiert wurden (programmgesteuert oder im style-Attribut des Elements definiert). Sie sollten den berechneten Stil erhalten.
Es ist nicht so einfach, dies über mehrere Browser hinweg zu tun. IE hat seinen eigenen Weg durch die element.currentStyle -Eigenschaft, und der DOM-Level-2-Standard, der von anderen Browsern implementiert wird, erfolgt über die document.defaultView. getComputedStyle-Methode.
Die zwei Möglichkeiten weisen Unterschiede auf. Beispielsweise erwartet die element.currentStyle -Eigenschaft IE, dass Sie auf die CSS-Eigenschaftsnamen zugreifen, die aus zwei oder mehr Wörtern in camelCase bestehen (z. B. maxHeight, fontSize, backgroundColor usw.) die Eigenschaften mit den durch Bindestriche getrennten Wörtern (z. B. maximale Höhe, Schriftgröße, Hintergrundfarbe usw.) .......
function getStyle(el, styleProp) {
var value, defaultView = (el.ownerDocument || document).defaultView;
// W3C standard way:
if (defaultView && defaultView.getComputedStyle) {
// sanitize property name to css notation
// (hyphen separated words eg. font-Size)
styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
} else if (el.currentStyle) { // IE
// sanitize property name to camelCase
styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
return letter.toUpperCase();
});
value = el.currentStyle[styleProp];
// convert other units to pixels on IE
if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
return (function(value) {
var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft + "px";
el.style.left = oldLeft;
el.runtimeStyle.left = oldRsLeft;
return value;
})(value);
}
return value;
}
}
Verwenden Sie das Folgende. Es hat mir geholfen.
document.getElementById('image_1').offsetTop
Siehe auch Stile abrufen.
Browserübergreifende Lösung zur Überprüfung von CSS-Werten ohne DOM-Manipulation:
function getStyleRuleValue(style, selector) {
for (var i = 0; i < document.styleSheets.length; i++) {
var mysheet = document.styleSheets[i];
var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
for (var j = 0; j < myrules.length; j++) {
if (myrules[j].selectorText && myrules[j].selectorText.toLowerCase() === selector) {
return myrules[j].style[style];
}
}
}
};
Verwendungszweck:
getStyleRuleValue('backgroundColor', '.chart-color')
bereinigte Version (zwingt die Eingabe des Selektors in Kleinbuchstaben und ermöglicht die Verwendung von Fällen ohne ".")
function getStyleRuleValue(style, selector) {
var selector_compare=selector.toLowerCase();
var selector_compare2= selector_compare.substr(0,1)==='.' ? selector_compare.substr(1) : '.'+selector_compare;
for (var i = 0; i < document.styleSheets.length; i++) {
var mysheet = document.styleSheets[i];
var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
for (var j = 0; j < myrules.length; j++) {
if (myrules[j].selectorText) {
var check = myrules[j].selectorText.toLowerCase();
switch (check) {
case selector_compare :
case selector_compare2 : return myrules[j].style[style];
}
}
}
}
}
Wenn Sie es programmgesteuert festlegen, können Sie es einfach wie eine Variable aufrufen (d. H. document.getElementById('image_1').style.top
). Andernfalls können Sie jQuery immer verwenden:
<html>
<body>
<div id="test" style="height: 100px;">Test</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
alert($("#test").css("height"));
</script>
</body>
</html>
Aus Sicherheitsgründen möchten Sie möglicherweise prüfen, ob das Element vorhanden ist, bevor Sie versuchen, daraus zu lesen. Wenn dies nicht der Fall ist, gibt der Code eine Ausnahme aus, die die Ausführung des restlichen JavaScript-Codes stoppt und möglicherweise eine Fehlermeldung an den Benutzer anzeigt - nicht geeignet. Sie möchten in der Lage sein, elegant zu versagen.
var height, width, top, margin, item;
item = document.getElementById( "image_1" );
if( item ) {
height = item.style.height;
width = item.style.width;
top = item.style.top;
margin = item.style.margin;
} else {
// Fail gracefully here
}
Du kannst tun:
getComputedStyle(document.querySelector(".className"))
Die Cross-Browser-Lösung ohne DOM-Manipulation funktioniert nicht, da sie die erste Übereinstimmungsregel und nicht die letzte Regel angibt. Die letzte Übereinstimmungsregel ist diejenige, die gilt. Hier ist eine funktionierende Version:
function getStyleRuleValue(style, selector) {
let value = null;
for (let i = 0; i < document.styleSheets.length; i++) {
const mysheet = document.styleSheets[i];
const myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
for (let j = 0; j < myrules.length; j++) {
if (myrules[j].selectorText &&
myrules[j].selectorText.toLowerCase() === selector) {
value = myrules[j].style[style];
}
}
}
return value;
}
Diese einfache Suche funktioniert jedoch nicht bei komplexen Selektoren.