javascript는 스타일과 계단식 스타일 시트를 동적으로 수정합니다.-JS 튜토리얼-php.cn

javascript는 스타일과 계단식 스타일 시트를 동적으로 수정합니다.

WBOY

풀어 주다： 2016-05-16 18:28:34

원래의

1303명이 탐색했습니다.

W3C DOM2 스타일 규칙
========================================== ===== ===============
CSSStyleSheet 객체
CSSStyleSheet 객체는 외부 스타일 시트와 이를 사용하는 CSS 스타일 시트를 포함한 모든 CSS 스타일 시트를 나타냅니다. <스타일 유형= "text/css"> 태그로 지정된 삽입된 스타일 시트.
CSSStyleSheet도 다른 DOM2 CSS 개체를 기반으로 구축되었으며 CSSStyleRule 개체는 스타일 시트의 각 규칙을 나타냅니다.
문서의 CSSStyleSheet 객체 목록은 document.stylesheets 속성을 통해 얻을 수 있습니다. 각 객체는 다음과 같은 속성을 갖습니다.
유형 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ulousdieure_/ > href 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 필요해야 함 상위 규칙
cssRules 읽기 전용 스타일 시트의 모든 CSSRule 객체를 포함하는 cssRuleList 목록 객체
============================== ===== ========================
insertRule(rule,index)　새 스타일 선언 추가
deleteRule(index)　　　에서 규칙 제거 스타일 시트

CSSStyleRule 객체

　 각 CSSStyleSheet 객체에는 CSSStyleRule 객체 세트가 포함되어 있습니다. 이러한 객체는 각각 다음과 유사한 규칙에 해당합니다.
boyd{
font:lucida,verdana,sans-serif background:#c7600f color:#1a3800;

CSSStyleRule 개체에는 다음과 같은 속성이 있습니다.

parentStyleSheet의 모든 규칙은 상위 CSSStyleRule 개체
를 참조합니다. parentRule 규칙이 다른 규칙에 있는 경우 이 속성은 다른 CSSRule 객체를 참조합니다.
selectorText 규칙의 선택기를 포함합니다. 스타일 HTMLElement.style과 유사하며 CSSStyleDeclaration 객체의 인스턴스입니다.
CSSStyleDeclaration object

CSSStyleRule 개체와 유사하게 CSSStyleDeclaration에는 다음 속성이 있습니다.
cssText 문자열 형식으로 표현된 모든 규칙
parentRule은 CSSStyleRule 개체를 참조합니다.
= ================================================= =======
getPropertyValue(propertyName)　 CSS 스타일 속성 값 RemoveProperty(propertyName)　 선언에서 속성 제거 setProperty(propertyName,value, Priority)　CSS 속성 값 설정

DOM 스크립트 외부에 스타일 배치

======================== ============ =====================
스타일 속성
스타일 속성 자체는 모든 다른 CSS 스타일의 특정 요소를 나타내는 속성입니다. style 속성을 통해 요소의 스타일 속성에 인라인으로 선언된 CSS 속성에만 액세스할 수 있습니다. 즉, 여러 스타일 시트에서 계단식으로 배열되거나 상위 요소에서 상속된 CSS 속성은 스타일 속성을 통해 액세스할 수 없습니다.

코드 복사

코드는 다음과 같습니다.

 
element.style.groundColor = 'red'; //배경색은 대문자와 소문자로 변환됩니다. 필수 
//ID가 "example"인 요소의 스타일을 설정합니다. 
setStyleById ( '예',{ 
 '배경색' : '빨간색', 
 '테두리' : '1px 단색 검정색', 
 '패딩' : '1px', 
 '여백' 1px ' 
}); 
function setStyle(elementid,styles){ 
 var element = document.getElementById(elementid); 
 // 스타일 객체를 반복하고 각 속성을 적용합니다. 
 스타일의 속성){ 
　　 // 스타일에 의해 직접 정의되지 않은 속성 
　if(!styles.hasOwnProperty(property)) continue; 
　　
　if(element.style.setProperty){ 
 요소 .style.setProperty(uncamlize(property, '-'), styles[property], null); 
　　} else { 
　　　element.style[camelize(property)] = styles[property] 
 } 
　} 
　
　return true; 
} 
//단어-단어를 단어로 변환 
function camelize(s) { 
return s.replace(/-( w) /g, function(math,p1){ 
return p1.toUpperCase(); 
}) 
} 
//wordWord를 단어-단어로 변환 
function uncamelize( s, sep ) { 
sep = sep || '-'; 
return s.replace(/([a-z])([A-Z])/g, function (match, p1, p2){ 
return p1 sep p2.toLowerCase(); 
}) 
} 
//className을 기준으로 스타일 전환
element.className = 'newclass' 

계산된 스타일에 액세스
요소의 성능을 수정하기 전에 먼저 현재 스타일 속성을 확인해야 할 수 있습니다. 요소의 스타일 속성은 포함된 방식으로 정의된 스타일에만 적용되므로 전달할 수 없습니다. 스타일 계산된 스타일을 얻기 위해 DOM2 사양에는 document.defaultView에 getCompulatedStyle()이라는 메서드가 포함되어 있습니다. 이 메서드는 다음과 같이 특정 요소의 모든 계산된 스타일을 포함하는 읽기 전용 CSSStyleDeclaration 개체를 반환합니다.

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

　var styles = document.defaultView.getCompulatedStyle(element)

 var color = styles.getProperty ('ground-color'); 

그러나 Microsoft에는 자체 버전의 element.currentStyle

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

//요소의 계산 스타일 가져오기

function getStyle(element,property) { 
　var value = element.style[camelize(property)]; 
　if(!value) { 
　if(document.defaultView && document.defaultView.getCompulatedStyle) { 
　　value = document.defaultView.getCompulatedStyle(element) .getPropertyValue(property); 
　　} else if (element.currentStyle) { 
　　value = element.currentStyle[camelize(property)]; 
　　} 
　 반환 값; } 