SeouliteLab

jQuery를 사용한 :root 선택자 활용하기 본문

프로그래밍

jQuery를 사용한 :root 선택자 활용하기

Seoulite Lab 2024. 4. 15. 08:45

jQuery에서의 :root 선택자는 문서의 루트 요소를 선택하는데 사용됩니다. HTML 문서에서 루트 요소는 <html> 요소를 가리킵니다. 이 선택자를 사용하면 문서 전체에 대한 스타일이나 속성을 설정할 때 유용하게 활용할 수 있습니다. 아래 예제를 통해 jQuery에서 :root 선택자를 활용하는 방법을 살펴보겠습니다.

예제 1: 루트 요소에 스타일 적용하기

$(document).ready(function() {
    $(":root").css("font-size", "20px");
});

이 예제는 문서의 루트 요소인 <html>에 포함된 모든 요소에 대해 글꼴 크기를 20px로 설정합니다.

예제 2: 루트 요소에서 데이터 속성 가져오기

$(document).ready(function() {
    var lang = $(":root").data("language");
    console.log("문서 언어:", lang);
});

이 예제는 문서의 루트 요소에서 data-language 속성 값을 가져와서 출력합니다.

예제 3: 루트 요소의 자식 요소 선택하기

$(document).ready(function() {
    var children = $(":root").children();
    console.log("루트 요소의 자식 요소 개수:", children.length);
});

이 예제는 문서의 루트 요소의 모든 자식 요소를 선택하고 개수를 출력합니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery를 사용한 특정 셀 내부의 제출 버튼 선택하기  (0) 2024.04.15
jQuery를 사용한 선택된 옵션 가져오기  (0) 2024.04.15
jQuery를 사용한 리셋 버튼 다루기  (0) 2024.04.15
jQuery를 사용한 라디오 버튼 선택 방법  (0) 2024.04.15
jQuery를 사용한 패스워드 입력 필드 선택 방법  (0) 2024.04.15
'프로그래밍' Related Articles more