0

ページの読み込み時に既存のルールに css プロパティを追加しようとしています。イベントで動作しonclickますが、ページの読み込み時には実行されません。コードは次のとおりです。

HTML

<ul id="list">
    <li>aa</li>
    <li>bb</li>
<ul>

<a onclick="changeIt(); return false" href="#">change background color</a>

CSS

li {
    color: black;
}

Javascript (私の場合、jQuery は適用できません。)

function changeIt() {
 var theRules = document.styleSheets[1];
 theRules.insertRule("li{background-color: yellow;}", 1);
}
changeIt(); // doesnt run on page load
4

4 に答える 4

4

ウィンドウロードで実行してみてください：

window.onload = function() {
    changeIt();
};
于 2013-03-14T11:05:30.533 に答える
1

<body onload="changeIt()"> jquery の document.ready と同じ機能ではありませんが、本文が読み込まれた後に機能します。

于 2013-03-14T11:06:04.020 に答える
1

ボディchangeIt()のイベントに呼び出しを入れてみましたか?onload

<body onload="changeIt()">
<!-- Body here -->
</body>
于 2013-03-14T11:06:15.447 に答える
1

関数の実行時に DOM の準備ができていないため、コードはおそらく機能しません。コードを実行する前に DOM の準備ができているかどうかを確認するには、いくつかの方法があります。最も一般的な方法は、onLoad イベントが発生するのを待つことです。あなたの場合、それは次のようになります<body onload='changeIt();'>...</body>

onLoad の待機に関する問題の 1 つは、ページの読み込みに時間がかかる場合、コードの実行が遅延することです。実際、DOM はページが読み込まれる前でも準備ができている可能性があります。したがって、DOM の準備状況を確認する別の方法は、'DOMContentLoaded' イベントを使用することです。詳細については、 http: //www.javascriptkit.com/dhtmltutors/domready.shtml を参照してください。

于 2013-03-14T11:19:33.397 に答える