2

クラス名が動的に生成されるページがあります。クラスには「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>
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 に答える