0

まず、下手な英語でごめんなさい。

さて、javascript を使用して、すべてのパラグラフの色のプロパティを変更する必要があります。これが私の html&JS コードです。

<body>
<p>Parragraph one</p>
<p>Parragraph two</p>
<button onclick="CE()">change style</button>
</body>

for (var j=0;j<document.styleSheets[0].cssRules.length;j++) {
  if(document.styleSheets[0].cssRules[j].selectorText='p')
    document.styleSheets[0].cssRules[j].style.color="#FF0000";
}

そして、これは私のCSSコードです:

p{
    color: green;
    font-size: 20px;
    font-weight: bold;
    font-family: arial;
}

私もこれでそれを変更しようとしました: document.styleSheets[0].cssRules[0].style.backgroundColor="#FF0000"; (動作するかどうかを確認するために背景色を変更しようとしていますが、Mozilla Firefox でのみ動作します)

4

3 に答える 3

0

必要な色で別のクラスを作成し、jQuery を使用して必要に応じてクラスを追加および削除します。

于 2013-11-05T10:01:39.623 に答える
0

Jquery を使用しなくても、すべての<p>タグを反復処理し、javascript を使用して css クラスを追加できます。私はそれをテストしていませんが、このようなものはうまくいくはずです。

<script>
function CE()
{
    var paragraphs = document.getElementsByTagName("p");
    for(var i = 0; i < paragraphs.length; i++)
    {
        paragraphs[i].setAttribute("class", "theme")
    }
}
</script>
<style>
.theme{
    color: green;
    font-size: 20px;
    font-weight: bold;
    font-family: arial;
}
</style>
于 2013-11-05T10:09:18.313 に答える
0

css に新しいクラスを記述し、すべての p 要素をループして、新しいクラスを追加します。

.p-different-color{
    color: green;
    font-size: 20px;
    font-weight: bold;
    font-family: arial;
}    

$("p").each(function(index, element) {       // note that the .each() handler has two parameters that can be used also
            $(this).removeClass();              // "this" inside the .each() handler function is the current DOM element in the iteration
            $(this).addClass('p-different-color');  
            });
于 2013-11-05T10:09:36.267 に答える