CSS-Eigenschaften per JS auslesen

[Marcus]

Hallo,

mal angenommen, ich habe ein Element, z.B. ein Div.

Gibt es eine Möglichkeit, mittels JavaScript Styleinformationen auszulesen? Also z.B. auszulesen welchen Wert eine bestimmte Eigenschaft hat (width, display, color, etc.) um diesen dann entsprechend in JS weiterverarbeiten zu können?

Grüße,
Marcus

[Patrick Andrieu]

Hallo Marcus!

Gibt es eine Möglichkeit, mittels JavaScript Styleinformationen auszulesen? Also z.B. auszulesen welchen Wert eine bestimmte Eigenschaft hat (width, display, color, etc.) um diesen dann entsprechend in JS weiterverarbeiten zu können?

Lesen der JavaScript-Objektreferenz hätte Dich zum Objekt style geführt.

Viele Grüße aus Frankfurt/Main,
Patrick

[Felix Riesterer]

Lieber Patrick,

Lesen der JavaScript-Objektreferenz hätte Dich zum Objekt style geführt.

... dessen Eigenschaften erst dann keinen Leerstring zurückgeben, wenn zuvor mit Javascript ein solcher Wert eingetragen wurde, oder wenn das Element (denn das ist der Effekt des per-JS-zuweisens) ein inline-Style-Attribut mit den gesuchten Eigenschaften enthält.

Ansonsten muss man wohl irgendwie an das "computed style" Dingens ran, aber da kenne ich mich jetzt (noch) nicht aus.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[peter]

Hi,

Ansonsten muss man wohl irgendwie an das "computed style" Dingens ran, aber da kenne ich mich jetzt (noch) nicht aus.

getComputedStyle();

Suche im Archiv nach "getComputedStyle" bringt jede Menge Ergebnisse.

gruß
peter

[Struppi]

Gibt es eine Möglichkeit, mittels JavaScript Styleinformationen auszulesen? Also z.B. auszulesen welchen Wert eine bestimmte Eigenschaft hat (width, display, color, etc.) um diesen dann entsprechend in JS weiterverarbeiten zu können?

Hier meine etwas alten Versuche mit den nötigen Eigenschaften
http://jstruebig.de/web/javascript/lib/css.html

Struppi.

[Cybaer]

Hi,

aus einem Stylesheet auslesen: Coding: CSS-Regeln (& Stylesheets) auslesen & ändern

Aktuellen Wert auslesen:

// Ermittle Style eines Elements 060627  
function getStyle(element,property) {  
 // Beim IE kann man (ueber currentStyle - IE5+) keine Eigenschaften  
 // abfragen, die kombinierte Werte enthalten (border, borderBottom, ...)  
 // Andererseits gibt es zu clip hier auch clipTop, clipRight, clipBottom & ClipLeft.  
 var result="";  
  
 obj=getObject(element);  
  
 if(obj) {  
  if(window.getComputedStyle) {  
   result=window.getComputedStyle(obj,"").getPropertyValue(property);  
  } else if(obj.currentStyle) {  
   result=obj.currentStyle[propertyToStyle(property)];  
  } else if(obj.style) {  
   result=obj.style[propertyToStyle(property)];  
  }  
 }  
  
 return result;  
}  
  
// Style-Schreibweise von CSS auf JS aendern  
function propertyToStyle(property) {  
 // 1. Eigenschaften mit reserviertem Bezeichner: Unterscheidung nach JScript- bzw. JavaScript-Syntax  
 if(property=="float") { property=((typeof(window.cssFloat)=="undefined")?"style":"css")+property.charAt(0).toUpperCase()+property.substring(1); }  
 // 2. Eigenschaften mit Bindestrich  
 else if(property.indexOf("-")>=0) {  
  // CSS-Syntax am "-" auftrennen, ...  
  syntax=property.split("-");  
  // ... ersten Teil uebernehmen und ...  
  property=syntax[0];  
  // ... folgende Teile mit grossem Anfangsbuchstaben  
  for(i=1; i<syntax.length; i++) { property+=syntax[i].charAt(0).toUpperCase()+syntax[i].substring(1); }  
 }  
 return property;  
}  
  
// Ermittle Objekt (veraenderbare Prioritaet: object/id/name/tagname) 050708  
function getObject(element,number) {  
 var obj=false, lastParam, type, types, i;  
 if(element) {  
  // Letzten, optionalen Parameter ermitteln (type)  
  lastParam=getObject.arguments[getObject.arguments.length-1];  
  // Erwuenschten Abfragetyp sichern: object/id/name/tagname (voreingestellte Typen und Reihenfolge der Abfrage)  
  type=(typeof(lastParam)=="string" && getObject.arguments.length>1)?lastParam.toLowerCase().replace(",","\/"):"object/id/name/tagname";  
  // Wenn element bereits Objekt ist und auch dieser Typ sein darf  
  if(typeof(element)=="object" && type.indexOf("object")>=0) { obj=element; }  
  else if(document.getElementById) {  
   number=(typeof(number)=="number")?number:0;  
   types=type.split("/");  
   for(i in types) {  
    if(types[i]=="id" && document.getElementById(element)) { obj=document.getElementById(element); break; }  
    else if(types[i]=="name" && document.getElementsByName(element) && document.getElementsByName(element)[number]) { obj=document.getElementsByName(element)[number]; break; }  
    else if(types[i]=="tagname" && document.getElementsByTagName(element) && document.getElementsByTagName(element)[number]) { obj=document.getElementsByTagName(element)[number]; break; }  
   }  
  }  
 }  
 return obj;  
}

Gruß, Cybaer