페이지로드시 CSS 속성 추가

페이지로드시 기존 규칙에 CSS 속성을 추가하려고합니다. onclick 이벤트와 함께 작동하지만 페이지가로드 될 때 실행되지 않습니다.페이지로드시 CSS 속성 추가

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; 
}

자바 스크립트 (jQuery를 내 경우에는 적용되지 않습니다.)

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

출처

2013-03-14 Adige72

함수가 실행될 때 DOM이 준비되지 않았기 때문에 코드가 작동하지 않습니다. 코드를 실행하기 전에 DOM이 준비되어 있는지 확인하는 방법에는 여러 가지가 있습니다. 가장 일반적인 방법은 onLoad 이벤트가 발생할 때까지 기다리는 것입니다. 귀하의 경우에는 다음과 같이 나타날 수 있습니다. <body onload='changeIt();'>...</body>

onLoad를 기다리는 문제 중 하나는 페이지로드가 오랜 시간이 걸리면 코드 실행이 지연된다는 것입니다. 사실 DOM은 페이지가로드되기 전에도 준비가 될 수 있습니다. 따라서 DOM 준비 상태를 확인하는 또 다른 방법은 'DOMContentLoaded'이벤트를 사용하는 것입니다. 자세한 내용은 http://www.javascriptkit.com/dhtmltutors/domready.shtml을 참조하십시오.

출처

2013-03-14 11:19:33

창로드를 실행 해보십시오 : 여기에 코드입니다 :

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

출처

2013-03-14 11:05:30 sroes

감사합니다. 그것은 효과가 있었다. – Adige72

항상 시도 할 수 있음 <body onload="changeIt()"> jquery document.ready와 동일한 기능은 아니지만 본문이로드 된 후에 작동합니다.

출처

2013-03-14 11:06:04 Parrotmaster

본체의 onload 이벤트에 changeIt() 전화를 걸었습니까?

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

출처

2013-03-14 11:06:15 William

고마워요. – Adige72

페이지로드시 CSS 속성 추가

답변

관련 문제