DOM script_javascript 기술을 통해 스타일 정보 설정-JS 튜토리얼-php.cn

DOM script_javascript 기술을 통해 스타일 정보 설정

WBOY

풀어 주다： 2016-05-16 18:19:25

원래의

967명이 탐색했습니다.

DOM 스크립트를 사용하여 스타일 정보 설정: (by wushan)
대부분의 상황에서는 CSS를 사용하여 스타일을 설정하지만, 노드 트리 정보의 요소 위치를 기반으로 노드 스타일을 설정하는 등 일부 특수한 경우에는 현재 CSS로는 이 작업을 수행할 수 있는 방법이 없습니다. 하지만 DOM을 사용하면 쉽게 구현할 수 있습니다.
예: 모든 hl 요소의 다음 형제 노드(다음 요소 노드)에 특정 스타일을 적용합니다. 이때 CSS를 사용하여 위치를 확인할 수 있는 방법은 없지만 DOM의 getElementsByTagName() 메서드를 사용하면 모든 hl 요소 뒤에 있는 요소를 쉽게 찾을 수 있습니다. 이때 찾은 요소에만 스타일을 적용하면 됩니다. 코드 목록은 다음과 같습니다.

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

 
function styleHeaderSibling ( ){ 
if(!document.getElementsByTagName) return false 
//브라우저가 "getElementsByTagName" 메소드를 지원하는지 감지합니다(일부 브라우저는 DOM을 지원하지 않음) 
var headers=document.getElementsByTagName(" hl"); 
for(var=0;ivar elem=getNextElement(headers[i].nextSibling); 
elem.style.fontWeight=”bold” ; 
elem .style.fontsize="1.2em"; 
　} 
} 
function getNextElement(node){ 
if(node.nodeType==1){ //이 노드는 텍스트 노드
 return 노드 
　 } 
 if(node.nextSibling){ 
 retnrn getNextElement(node.nextSibling) 
 } 
return null; >
 
단점: "동작 레이어"가 "프리젠테이션 레이어"의 작업을 완료하게 하세요. DOM 스크립트에서 설정한 스타일 정보를 변경해야 할 때 수정이 가능하다면 매우 번거롭습니다. 스타일을 지정할 노드의 클래스 속성을 지정하면 수정이 매우 간단해집니다. 예를 들어 위의 예를 다음과 같이 수정할 수 있습니다. 

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

function styleHeaderSibling( ){

if(!document.getElementsByTagName) return false; 
//브라우저가 "getElementsByTagName" 메소드를 지원하는지 감지합니다. 
var headers=document. hl"); 
for (var=0;ivar elem=getNextElement(headers[i].nextSibling); 
elem.className="intro"; 
//요소 설정 클래스 속성 값의 구문은 다음과 같습니다. elements.className=value 
} 
} 

 
이 기술에는 단점이 있습니다. 요소가 원래 클래스 속성 값을 사용하면 원래 속성 값이 새 속성 값으로 덮어쓰여지고 원래 스타일은 손실됩니다. 따라서 덮어쓰는 대신 메타클래스 속성 값을 기반으로 새 속성 값을 추가해야 합니다. 

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

function addClass(element ,value)｛

if(!element.className){ 
element.className=value; 
　 }else{ 
newclassName=element.className; 
newclassName =" "; 이 공간에 주목하세요
newclassName =value; 
element.className =newclassName; 
　} 
｝ 

 
그런 다음 위 함수를 수정하세요. 

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

function styleHeaderSibling( ){

if(!document.getElementsByTagName) return false;//브라우저가 "getElementsByTagName" 메소드를 지원하는지 감지합니다. 
var headers=document.getElementsByTagName(“hl”) 
for(var=0;ivar elem=getNextElement(headers[i].nextSibling); 
addClass(elem,"intro") 
　} 
} 

 

참고: 일반적인 상황에서는 DOM을 사용하여 스타일을 설정하는 것은 현명하지 않습니다. 이 방법은 CSS가 페이지 콘텐츠를 풍부하게 하는 데 필요한 스타일을 설정할 수 없는 경우에만 사용됩니다.