ショートハンドCSSプロパティフォームを展開する

Question

ページロード時に動的にウェブページのスタイルシートの一部を書き直しています。 （私は、何より良い選択を持っていない私を信じています。）例えばpadding-leftが-webkit-padding-startとpadding-rightが-webkit-padding-rightになるとなるよう具体的には、私は、彼らの-webkit-*同等でpadding、margin、およびborderプロパティを交換しています。

document.styleSheetsを繰り返して、各ルールにアクセスしてスタイルを置き換えています。これは、右から左へのサポートを強化するためです。

paddingとmarginとborderのような短絡プロパティで問題が発生します。 paddingとmarginについては、テキストと他のものを分けることができるので、拡張プロパティ（padding-left、padding-rightなど）が得られます。しかし、borderは非常に解析が難しいです。

これらのプロパティをより確実に展開する方法があるかどうかは疑問でした。 （要素を動的に作成したり、スタイルを設定したり、拡張プロパティを取得することはできますか？または何か他に何かできますか？）

Answer 1

いいえ。私はCSSStyleDeclarationがそれ自体でそれをすることを知りました。私は間違った順序で私の操作をしていた。ここで

が私の仕事の結果であり、私は、誰かがそれを有用見つけた願っています：

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 = ""; 
    } 
}