Question

让我解释一下。我有一个存储在表中的css页面，它以这种形式呈现：

. styleFloatCenter, form.styleFloatCenter,. focus {
   margin: auto;
   width: 70%;
}

所有css都是这样构建的，它是一种常态。我需要为我的所有css“规则”恢复第二个元素，例如styleFloatCenter。

一个想法？ Ty！

编辑：第二个例子：

. red, form.redColor,. focus {
   margin: auto;
   width: 70%;
}

这里我需要redColor ......

Answer 1

试试javascript regex -

var pattern = /,(.+),/;
var oneRule = ". styleFloatCenter, form.styleFloatCenter,. focus {\
 margin: auto;\
 width: 70%;\
 }"; //store one rule in it
var result = pattern.exec(oneRule);
alert(result[1]); //Your required value

可以查看here 您可以使用循环逐个分配每个规则如果要将整个css doc解析在一起，则首先使用模式搜索规则，然后使用第二个元素

Answer 2

要阅读样式表规则，请使用document.styleSheets。以下代码列出了页面上所有样式表中所有规则的第二个选择器的类名称：

// for all stylesheets on the page
for(var i = 0; i < document.styleSheets.length; ++i) {
    var rules = document.styleSheets[i].rules || document.styleSheets[i].cssRules;

    // for all rules in this sheet
    for(var j = 0; j < rules.length; ++j) {

        // get the full selector string for this rule
        var selector = rules[j].selectorText;

        // get the second selector in the list
        var secondSelector = selector ? selector.split(",")[1] : null;

        // get the class name of that selector
        var secondSelectorClass = secondSelector ? secondSelector.split(".")[1] : null;

        console.log(secondSelectorClass);
    }
}

Answer 3

window.getComputedStyle(document.getElementsByClassName("styleFloatCenter")[0])

如果页面上有一个包含该类的元素，您可以使用上面的代码获取其computedStyle。从那里你可以找到你可能正在寻找的任何特定风格。

顺便说一下，点和选择器名称之间不能有空格。 . styleFloatCenter不会选择类styleFloatCenter的元素。它必须是.styleFloatCenter没有空格。

如果您只是想要.styleFloatCenter, form.styleFloatCenter,.focus中的第二个选择器的名称，则可以使用explode将逗号分隔列表并选择第二个。

$parts = explode(',', '.styleFloatCenter, form.styleFloatCenter,.focus');
echo $parts[1];

获取一些特定的CSS元素

3 个答案: