2

我正在尝试使用 document.styleSheets 为 CSS calc 功能添加垫片。

基本上，我循环遍历每个样式表及其后续规则并寻找 calc 发生在某处，并在 JavaScript 中进行计算并将其应用于相关元素。

这比遍历页面上的每个元素并尝试查找它是否有失败的计算规则要快得多，但问题是我看不到通过这种方法引入错误的 CSS 规则的方法。规则和 cssRules 数组都只包含浏览器认为有效的 CSS。

我的问题是，有没有办法通过这种方法获取这些无效的 CSS 值？

我正在使用的代码在下面，并且可以工作，但只能在支持 calc 的浏览器上运行，这对我来说没用。我需要能够获取所有出现在加载的 CSS 文档中的 css 规则，以使其正常工作。

这是可能的，还是我在创造一个想象中的跨浏览器计算超棒的幻想树？

calcShim = function(){
    var stylesheets = document.styleSheets;
    var calcs = [];
    for (var i=0, j=stylesheets.length; i<j; i++){
        var stylesheet = stylesheets[i];
        var rules = stylesheet.cssRules;
        if (rules && rules.length > 0){
            for (var k=0, l=rules.length; k<l; k++){
                var rule = rules[k];
                var ruleText = String(rule.cssText);
                if (ruleText.match("calc")){
                    calcs.push(ruleText);
                };
            };
        }
    };

    for (var i=0, j=calcs.length; i<j; i++){
        var string = calcs[i];
        var reference = calcs[i].match(/^[^{]{1,}/g)[0];

        var objects = $(reference);
        for (var k=0, l=objects.length; k<l; k++){
            var object = $(objects[k]);
            var parent = object.parent();

            if  (parent.is(":visible")){
                var parentWidth = parseInt(parent.width());
                var percent = parseInt(string.match(/(?:calc\()([0-9]{1,3})(?=%)/)[1])/100;
                var operator = string.match(/(?:calc[^)]{1,})([\+\-\*\/])(?=\s[0-9]{1,3}px)/)[1];
                var value = parseInt(string.match(/(?:calc[^)]{1,}[\+\-\*\/]\s)([0-9]{1,3})(?=px)/)[1]);

                var mathString = (parentWidth*percent) + " " + operator + " " + value;
                var result = eval(mathString);
                object.css({"width": result});
            }
        };
    };
};

我知道这段代码可能会更好/更干净，我只是想提出一个概念证明。

4

0 回答 0