이 기사에서는 JavaScript로 CSS를 추가하는 방법에 대해 설명합니다.
JavaScript로 CSS를 추가하는 방법?
JavaScript에서는 다음 메서드 또는 접근 방식을 사용하여 해당 스타일 속성을 수정하여 요소에 CSS 스타일을 추가할 수 있습니다.
방법 1: 'style' 속성을 사용하여 JavaScript로 CSS 추가
JavaScript에 CSS를 추가하려면 ' 스타일 ' 재산. 요소의 인라인 스타일에 액세스하고 조작하는 데 사용됩니다. 요소의 인라인 스타일을 나타내는 개체를 제공하고 개별 스타일 속성을 가져오거나 설정할 수 있습니다.
통사론
JavaScript에 CSS 스타일을 추가하기 위해 ' 스타일 ' 재산:
요소. 스타일 ;
여기, ' 요소 ”는 HTML 요소에 대한 참조입니다.
예
다음 예에서는 JavaScript를 사용하여 버튼의 스타일을 지정합니다. 먼저 세 개의 버튼을 만들고 버튼에 ID를 할당하여 스타일링을 위해 버튼 요소에 액세스하는 데 도움을 줍니다.
< 버튼 ID = 'btn2' > 거부하다 단추 >
< 버튼 ID = 'btn3' > 수용하다 단추 >
스타일을 지정하기 전에 출력은 다음과 같습니다.
이제 ' 스타일 ' 재산. 먼저, 할당된 ID를 사용하여 ' getElementById() ' 방법:
동의하다 = 문서. getElementById ( 'btn1' ) ;거절하자 = 문서. getElementById ( 'btn2' ) ;
수락하자 = 문서. getElementById ( 'btn3' ) ;
“ 스타일 ' 재산:
동의하다. 스타일 . 배경색 = '녹색' ;거부하다. 스타일 . 배경색 = '빨간색' ;
수용하다. 스타일 . 배경색 = '노란색' ;
보시다시피 버튼은 ' 스타일 ' 재산:
방법 2: 'setAttribute()' 방법을 사용하여 JavaScript로 CSS 추가
JavaScript에서 CSS 스타일을 추가하려면 ' setAttribute() ' 방법. 속성과 해당 값을 HTML 요소에 설정하거나 추가하는 데 사용됩니다.
통사론
다음 구문은 ' setAttribute() ' 방법:
예
여기에서는 '를 사용하여 JavaScript의 버튼에 다양한 스타일을 설정합니다. setAttribute() ' 방법. 모든 버튼의 테두리 반경을 ' .5렘 ', '의 텍스트 색상 동의하다 ' 그리고 ' 거부하다 ” 버튼을 “ 하얀색 '.
거부하다. setAttribute ( '스타일' , '배경색: 빨간색, 색상: 흰색, 테두리 반경: .5rem;' ) ;
수용하다. setAttribute ( '스타일' , '배경색: 노란색; 테두리 반경: .5rem;' ) ;
산출
방법 3: 'createElement()' 방법을 사용하여 JavaScript로 CSS 추가
CSS 스타일에서와 같이 JavaScript 스타일에서 클래스 또는 ID를 생성하려면 ' 생성요소() ' 방법. 새 요소를 동적으로 생성하는 데 사용됩니다. 스타일링을 위해 ' 스타일 ” 이 방법을 사용하여 요소. “ createElement('스타일') ” JavaScript의 메서드는 웹 페이지에 CSS 스타일을 추가하는 데 사용할 수 있는 새로운 스타일 요소를 동적으로 생성하는 데 사용됩니다.
통사론
주어진 구문은 ' 생성요소() ' 방법:
JavaScript에서 CSS 스타일을 추가하려면 다음 구문을 사용하십시오.
const 스타일 = 문서. createElement ( '스타일' ) ;그런 다음 아래 구문을 사용하여 head 태그에 스타일 요소를 추가합니다.
문서. 머리 . 추가 어린이 ( 스타일 ) ;여기, ' 스타일 '는 새로 생성된 스타일 요소에 대한 참조이고 ' 문서.헤드 ”는 HTML 문서의 헤드 요소입니다.
예
먼저 '를 사용하여 스타일 요소를 만듭니다. 생성요소() ' 방법:
이제 ' btn ' 모든 버튼과 ID에 동일한 스타일을 적용하기 위한 클래스 ' btn1 ”, “ btn2 ' 그리고 ' btn3 ” 개별 버튼 스타일:
스타일. innerHTML = `. btn {
폰트 - 크기 : 1.1렘 ;
심 : 3px ;
여유 : 2px ;
폰트 - 가족 : 없이 - 가는 장식 선 ;
국경 - 반지름 : .5렘 ;
}
#btn1 {
배경 - 색상 : 녹색 ;
색상 : 하얀색 ;
}
#btn2 {
배경 - 색상 : 빨간색 ;
색상 : 하얀색 ;
}
#btn3 {
배경 - 색상 : 노란색 ;
}
` ;
이제 매개변수로 ' 추가 어린이() ' 방법:
문서. 머리 . 추가 어린이 ( 스타일 ) ; 산출
JavaScript에 CSS를 추가하는 것이 전부입니다.
결론
JavaScript로 CSS를 추가하려면 ' 스타일 ” 속성 및 “ setAttribute() ” 메서드 또는 “ 생성요소() ' 방법. 전역 스타일링이 더 효율적이지만 인라인 방식은 응용 프로그램의 스타일을 유지하기 어렵고 코드 반복으로 이어질 수 있으므로 권장하지 않습니다. 이 기사에서는 JavaScript로 CSS를 추가하는 방법에 대해 설명했습니다.