Question

我正在尝试在页面加载时将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

Answer 1

尝试在窗口加载时运行它：

window.onload = function() {
    changeIt();
};

Answer 2

你可以随时尝试 <body onload="changeIt()"> 它与jquery document.ready的功能不同，但它在主体加载后才能工作。

Answer 3

您是否尝试将changeIt()来电置于身体的onload事件中？

<body onload="changeIt()">
<!-- Body here -->
</body>

Answer 4

您的代码可能无效，因为在您的函数运行时DOM尚未就绪。在执行任何代码之前，有几种方法可以检查DOM是否准备就绪。最常见的方法是等待onLoad事件发生。在您的情况下，可能看起来像<body onload='changeIt();'>...</body>

等待onLoad的一个问题是，如果页面需要很长时间才能加载，那么代码的执行将会延迟。事实上，即使在页面加载之前，DOM也可以准备就绪。因此，检查DOM准备情况的另一种方法是使用“DOMContentLoaded”事件，有关详细信息，请参阅http://www.javascriptkit.com/dhtmltutors/domready.shtml。

在页面加载时添加CSS属性

4 个答案: