JavaScript는 동적 스타일 구현 code_javascript 기술을 삽입합니다.-JS 튜토리얼-php.cn

동적 스크립트와 유사하게 동적 스타일이라 불리는 것은 페이지가 처음 로드될 때 존재하지 않는 스타일을 의미하며, 페이지가 로드된 후 동적 스타일이 페이지에 동적으로 추가됩니다.

다음의 일반적인 요소를 예로 들어보겠습니다.

이 요소는 DOM 코드를 사용하여 쉽게 동적으로 생성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

 
var link = document.createElement("link"); 
link.rel = "stylesheet"; 
link.type = "text/css" 
link.href = "style.css" ; 
var head = document.getElementsByTagName("head")[0]; 
head.appendChild(link); 

위 코드는 모든 주요 브라우저에서 정상적으로 실행될 수 있습니다. 모든 브라우저에서 일관된 동작을 보장하려면 요소가 아닌 요소에 추가해야 합니다. 전체 과정은 다음 함수로 표현할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

 
function loadStyles( url) { 
var link = document.createElement("link"); 
link.rel = "stylesheet" 
link.type = "text/css" 
 link.href = url 
var head = document.getElementsByTagName("head")[0]; 
head.appendChild(link) 
} 
loadStyles("style.css") 

외부 스타일 파일을 로드하는 프로세스는 비동기식입니다. 즉, 스타일을 로드하고 JavaScript 코드를 실행하는 프로세스에 고정된 순서가 없습니다.

스타일을 정의하는 또 다른 방법은 다음과 같이

동일한 논리에 따라 다음 DOM 코드가 유효해야 합니다.

코드 복사 코드는 다음과 같습니다.

var style = document.createElement("style") 
style.type = "text/css" 
style.appendChild( document .createTextNode("body{Background-color:red;}")); 
var head = document.getElementsByTagName("head")[0]; 
head.appendChild(style); 🎜 > 
위 코드는 Firefox, Safrai, Chrome, Opera에서 실행 가능하지만 IE에서는 오류가 보고됩니다. IE는 