2

我有一个页面，其中类名是动态生成的。该类具有“写作模式：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>
4

1 回答 1

0

您可以使用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"]
于 2012-12-31T16:21:54.383 回答