Erweitern Kurzhand CSS-Eigenschaften Form js

Question

Ich umschreibe Teile von Stylesheets einer meiner Webseiten, dynamisch beim Laden der Seite. (Ich habe keine bessere Wahl, glauben Sie mir.) Genauer gesagt, ich bin zu ersetzen padding, margin und border Eigenschaften mit ihren -webkit-* Äquivalenten, so zum Beispiel padding-left wird -webkit-padding-start und padding-right-webkit-padding-right wird. (Das ist für eine bessere Unterstützung von rechts nach links.)

Ich mache das, indem ich durch document.styleSheets Iteriere und jede Regel besuche und die Stile ersetze. Das Problem ist mit den Kurzhandeigenschaften, wie padding und margin undFür padding und margin kann ich den Text und andere Sachen teilen, also bekomme ich die erweiterten Eigenschaften (padding-left, padding-right, etc.). Aber border ist sehr schwierig zu analysieren.

Ich frage mich, ob es eine gute Möglichkeit gibt, diese Eigenschaften zuverlässiger zu erweitern. (Kann ich ein Element dynamisch erstellen, den Stil darauf festlegen und die erweiterten Eigenschaften abrufen? Oder etwas anderes?)

Answer 1

Okay. Ich fand heraus, dass CSSStyleDeclaration das allein macht. Ich machte meine Operationen in der falschen Reihenfolge.

Hier ist das Ergebnis meiner Arbeit, ich hoffe jemand es nützlich findet:

var styleSheets = document.styleSheets; 
for (var i = 0; i < styleSheets.length; i++) { 
    var sheet = styleSheets[i]; 
    if (!(sheet instanceof CSSStyleSheet)) { 
     continue; 
    } 
    var rules = sheet.rules; 
    for (var j = 0; j < rules.length; j++) { 
     var rule = rules[j]; 
     if (!(rule instanceof CSSStyleRule)) { 
      continue; 
     } 
     var style = rule.style; 
     style.webkitPaddingStart = style.paddingLeft; 
     style.webkitPaddingEnd = style.paddingRight; 
     style.paddingLeft = ""; 
     style.paddingRight = ""; 
     style.webkitMarginStart = style.marginLeft; 
     style.webkitMarginEnd = style.marginRight; 
     style.marginLeft = ""; 
     style.marginRight = ""; 
     style.webkitBorderStartColor = style.borderLeftColor; 
     style.webkitBorderEndColor = style.borderRightColor; 
     style.webkitBorderStartStyle = style.borderLeftStyle; 
     style.webkitBorderEndStyle = style.borderRightStyle; 
     style.webkitBorderStartWidth = style.borderLeftWidth; 
     style.webkitBorderEndWidth = style.borderRightWidth; 
     style.borderLeftColor = ""; 
     style.borderRightColor = ""; 
     style.borderLeftStyle = ""; 
     style.borderRightStyle = ""; 
     style.borderLeftWidth = ""; 
     style.borderRightWidth = ""; 
    } 
}