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

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가 페이지 콘텐츠를 풍부하게 하는 데 필요한 스타일을 설정할 수 없는 경우에만 사용됩니다.