使用jQuery查找类并添加属性

Question

我有一个动态生成类名的页面。该类有“writing mode: tb-rl;”属性，但我想添加IE以外的其他浏览器中的竖排文本所需的其他属性。

链接到JSFiddle示例：http://jsfiddle.net/VheJd/1/

完整的HTML：

<html>
<head>
<title>test page</title>
<style type="text/css">
    .dynamic_name {
        writing-mode: tb-rl;
        /*Would like to find the class by the writing-mode property then add the properties below:*/
        /*-webkit-transform: rotate(90deg);
         -moz-transform: rotate(90deg);
         -o-transform: rotate(90deg);*/
    }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        //find classes with  writing-mode: tb-rl and add -moz-transform etc... properties
    });
</script>
</head>
<body>
<table>
    <tr>
        <td class="dynamic_name">text 1</td>
        <td class="dynamic_name">text 2</td>
    </tr>
    <tr>
        <td>hello</td>
        <td>world</td>
    </tr>
</table>
</body>
</html>

Answer 1

您可以使用getComputedStyle()通过JS检查页面上所有元素的特定CSS属性值，但这会非常慢。

最好是找到一种方法来确定动态类的名称，然后根据这个类的名称选择所需的元素。例如，如果所有这些动态类都有一些前缀，您可以这样选择这些元素(本例中的前缀是foo- )：

var elems = document.querySelectorAll('[class ^= "foo-"]');

如果类名始终包含数字子串(并且页面上没有其他元素具有包含数字的类名)，则可以使用复杂的属性-子串选择器：

TD[class*="1"], TD[class*="2"], TD[class*="3"], TD[class*="4"], TD[class*="5"],
TD[class*="6"], TD[class*="7"], TD[class*="8"], TD[class*="9"], TD[class*="0"]