扩展短手CSS属性形式JS

Question

我正在重写我网页的样式表的部分，并在页面加载上动态。(相信我，我别无选择。(更具体地说，我用-webkit-*等效替换padding，margin和border属性，例如padding-left变为-webkit-padding-start，padding-right变为-webkit-padding-right。(这是为了更好的左转支持。(

我是通过迭代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 = "";
    }
}