예
에 빨간 색을 추가 <h1> 요소 :
document.getElementById("myH1").style.color = "red"; 스타일을 설정하기 전에 :
Hello World!
스타일을 설정 한 후 :
Hello World!
»그것을 자신을 시도 더 "Try it Yourself" 아래의 예.
정의 및 사용
스타일 속성은 요소의 스타일 속성을 나타내는의 CSSStyleDeclaration 객체를 반환합니다.
스타일 속성을 가져 오거나 다른 CSS 속성을 사용하여 요소의 특정 스타일을 설정하는 데 사용됩니다.
참고 : 스타일 예를 들어 건물, 요소 .style = 문자열을 할당하여 스타일을 설정할 수 없습니다 "color: red;" . 요소의 스타일을 설정하려면 추가 "CSS" 스타일 속성을이 같은 값을 지정 :
element .style.backgroundColor = "red"; // set the background color of an element to red Try it
당신이 볼 수 있듯이, CSS 속성을 설정하기위한 자바 스크립트 구문은 CSS 약간 다릅니다 (backgroundColor instead of background-color) .
사용 가능한 모든 속성의 목록은 우리의 참조 스타일의 객체 참조 .
참고 : 스타일 속성은 예를 들어, 요소의 인라인 스타일 속성에서 설정 한 CSS 선언을 반환
<P 스타일 = "색상 : 빨강;">. 에서 스타일 규칙에 대한 정보를 얻기 위해이 속성을 사용할 수 없습니다 <head> 문서 또는 외부 스타일 시트에 절을 참조하십시오.
그러나 액세스 할 수있는 <style> 에서 요소 <head> 문서를 사용하여. getElementsByTagName() :
var x = document.getElementsByTagName("STYLE")[0]; // get the first
<style> element Try it
참고 : 대신의 스타일 속성을 사용하는 것이 좋습니다 element . setAttribute("style", "...") 방법, 스타일 속성이 지정 될 수있는 다른 CSS 속성을 덮어 쓰지 않기 때문에 style 속성을.
브라우저 지원
| 재산 | |||||
|---|---|---|---|---|---|
| style | 예 | 예 | 예 | 예 | 예 |
통사론
스타일 속성을 반환합니다 :
element .style. property 설정 스타일 속성 :
element .style. property = value 속성 값
| 값 | 기술 |
|---|---|
| value | 지정된 속성의 값을 지정합니다. 예를 들어, borderBottom 속성 : 소자는 .style.borderBottom = "2 픽셀 적색 고체"; |
기술적 세부 사항
| 반환 값 : | 요소의 스타일 속성을 나타내는의 CSSStyleDeclaration 객체, |
|---|---|
| DOM 버전 | DOM 레벨 2 CSS |
더 예
예
a의 값 가져 오기 <p> 요소의 상위 경계를 :
var x = document.getElementById("myP").style.borderTop;X의 결과는 다음과 같습니다
5px solid red »그것을 자신을 시도 관련 페이지
CSS 자습서 : CSS 자습서
CSS 참조 : CSS 속성
HTML DOM 참조 : 스타일 객체 참조
HTML 참조 : HTML <style> 태그
<요소 개체