이 가이드는 JavaScript에서 HTML DOM 요소 '스타일' 속성의 목적과 작동에 대해 자세히 설명합니다.
HTML DOM 요소 '스타일' 속성은 JavaScript에서 어떻게 작동합니까?
HTML DOM ' 스타일 ”는 할당된 스타일 속성에 따라 작동하는 읽기 전용 속성입니다. 또한 ' CSSStyle 선언 ” 특정 HTML 요소의 모든 인라인 스타일 속성을 포함하는 객체.
메모: 'CSSStyleDeclaration' 개체에는 head 섹션에 정의된 CSS 스타일 속성이 포함되어 있습니다.
구문(스타일 속성 설정)
요소. 스타일 . 재산 = 값위 구문에 따르면 ' 스타일 ' 속성은 하나의 매개변수만 지원합니다. ' 값 ”는 지정된 스타일 지정 속성의 값을 나타냅니다.
구문(스타일 속성 반환)
요소. 스타일 . 재산위에서 설명한 'style' 속성의 구문을 실제로 구현해 보겠습니다.
예 1: 'style' 속성을 사용하여 특정 HTML 요소의 색상 설정
이 예는 '의 기본 구문을 적용합니다. 스타일 ” 속성을 사용하여 특정 HTML 요소의 색상이 변경되도록 “style” 속성 값을 설정합니다.
HTML 코드
먼저 주어진 HTML 코드를 살펴보십시오.
< h2 > JavaScript에서 스타일 속성 사용 h2 >
< h3 아이디 = 'H3' > 두 번째 소제목. h3 >
위의 코드 라인에서:
- “ ” HTML 태그는 첫 번째 부제목을 지정합니다.
- “ ” 태그는 할당된 ID “H3”을 사용하여 수준 3의 두 번째 부제목을 만듭니다.
자바스크립트 코드
다음으로 명시된 JavaScript 코드를 따릅니다.
< 스크립트 >문서. getElementById ( 'H3' ) . 스타일 . 색상 = '녹색' ;
스크립트 >
위 코드 스니펫에서 ' document.getElementById() ” 메서드는 포함된 “ ” id를 통한 요소 “ H3 ” 지정된 “ 색상 ”를 통해 요소의 속성 값 스타일.색상 ' 재산.
산출
출력은 대상 HTML 요소의 시각적 표현이 '스타일' 속성을 사용하여 적절하게 설정되었음을 보여줍니다.
예 2: 'style' 속성을 사용하여 적용된 'style' 속성 값 가져오기
이 예제에서 'style' 속성은 일반화된 구문(Return a style 속성)을 사용하여 HTML 요소의 할당된 'style' 속성을 찾는 데 도움이 됩니다.
HTML 코드
HTML 코드는 다음과 같습니다.
< h2 > JavaScript에서 스타일 속성 사용 h2 >< h3 아이디 = 'H3' 스타일 = '배경색:주황색;' > 두 번째 소제목 배경색의 값은 : h3 >
< h4 아이디 = '데모' > h4 >
이 코드에서:
- “ ” HTML 태그는 “
” HTML 요소의 배경색을 설정하는 “style” 속성을 사용합니다.
- “ ” 태그는 id가 “인 수준 4의 빈 부제목을 만듭니다. 데모 '.
자바스크립트 코드
이제 주어진 JavaScript 코드를 살펴보십시오.
< 스크립트 >const 값 = 문서. getElementById ( 'H3' ) . 스타일 . 배경색 ;
문서. getElementById ( '데모' ) . innerHTML = 값 ;
스크립트 >
위에서 작성한 코드에서:
- 변수 ' 값 '는 '로 선언됩니다. const '를 적용하는 키워드 document.getElementById() 적용된 'style' 속성의 값을 가져오고 이를 'style' 속성을 통해 요소 즉, '
'에 적용하기 위해 해당 ID를 사용하여 '
' 요소를 가져오는 ' 메소드.
- 'document.getElementById()' 메서드는 추가된 빈 '
' 요소에 액세스하고 가져온 HTML 요소에 대해 할당된 'style' 속성의 값을 표시하고 ' innerHTML ' 재산.
산출
출력은 요소에 배경색을 적용하고 그에 따라 설정된 'style' 속성의 값도 반환됩니다.
결론
자바스크립트는 ' 스타일 ” 속성을 사용하여 HTML DOM 요소의 인라인 '스타일' 속성을 할당하고 반환합니다. 그에 따라 원하는 기능을 적용하려면 추가 '가치'가 필요합니다. 설정 및 검색 외에도 기존 '스타일' 속성을 변경하는 것도 유용합니다. 이 가이드는 HTML DOM 요소 스타일 속성의 주요 목표, 작업 및 실제 구현을 보여줍니다.