javascript - 扩展 js 的简写 css 属性

Question

我正在重写我网页的部分样式表，在页面加载时动态重写。 (相信我，我没有更好的选择。)更具体地说，我将 padding、margin 和 border 属性替换为它们的 -webkit-* 等价物，例如 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 = "";
    }
}