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 的问题之一是，如果页面加载时间过长，代码的执行就会延迟。事实上，DOM 甚至在页面加载之前就已经准备好了。因此，检查 DOM 准备情况的另一种方法是使用“DOMContentLoaded”事件，有关更多信息，请参见http://www.javascriptkit.com/dhtmltutors/domready.shtml。

于 2013-03-14T11:19:33.397 回答