JavaScript History 객체 HTML DOM Element 객체

HTML DOM style 속성

style속성을 설정하거나 요소의 인라인 스타일 속성을 반환합니다.

그것은CSSStyleDeclaration오브젝트입니다. 이 오브젝트는 요소의 모든 스타일 속성 목록을 포함하고, 요소의 인라인 스타일 속성에 정의된 속성에 값을 할당합니다.

문법:

스타일 속성 반환:

element.style.property

스타일 속성 설정:

element.style.property = value

예제

document.getElementById("demo").style.color = "blue";

테스트 보기‹/›

주의:style 속성에 문자열을 할당하여 스타일을 설정할 수 없습니다. 예를 들어:element.style="color:blue;". 요소의 스타일을 설정하려면 스타일 뒤에 "CSS" 속성을 추가하고 값을 지정하십시오. 예를 들어:

element.style.backgroundColor="blue";　//요소의 배경색을 파란색으로 설정합니다

CSS 속성을 설정하는 JavaScript 문법은 CSS(backgroundColor 대신 background)와 동일합니다.-color)은 약간 다릅니다.

모든 사용 가능 속성 목록에 대한 정보는 다음을 참조하세요:스타일 객체 참조.

style 속성은 요소에 적용된 스타일을 완전히 이해하는 데 유용하지 않습니다. 왜냐하면 이는 요소의 인라인 스타일 속성에 설정된 CSS 선언만을 나타내며, 다른 곳에서(예: 이 절의 스타일 규칙)나 외부 스타일 시트에서 오는 스타일 규칙의 CSS 선언을 나타내지 않기 때문입니다. 요소의 모든 CSS 속성 값을 가져오려면 다음을 사용해야 합니다:window.getComputedStyle().

하지만, document.getElementsByTagName()를 사용하여 <head>에서 <style> 요소에 접근할 수 있습니다:

var x = document.getElementsByTagName("style")[0]; //첫 번째 <style> 요소를 가져옵니다

주의:style 속성 대신 사용을 권장합니다:요소 .setAttribute("style", "...")메서드는 style 속성이 style 속성에서 설정된 다른 CSS 속성을 덮어쓰지 않기 때문입니다.

브라우저 호환성

모든 브라우저가 완전히 지원하는 style 속성:

속성
style	는	는	는	는	는

속성 값

값	설명
value	지정된 속성의 값을 설정합니다. 예를 들어, border 속성의 경우: element.style.border="5px 진한 파란색";

기술 세부 사항

반환 값:	한CSSStyleDeclaration요소의 style 속성을 나타내는 객체
DOM 버전:	CSS 객체 모델(CSSOM)

JavaScript 오브젝트

JavaScript 참조 매뉴얼

JS DOM 참조 매뉴얼

HTML DOM style 속성

문법:

브라우저 호환성

속성 값

기술 세부 사항

更多实例

관련 참조