Question

我有一个动态生成类名的页面。该类具有“写入模式：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-"]');

如果类名总是包含数字子字符串（并且页面上没有其他包含数字的类名的元素），则可以使用复杂的attribute-substring选择器：

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"]

使用jQuery查找类和添加属性

1 个答案: