DOM 요소의 속성 작업

DOM 요소 속성 조작은 까다로울 수 있습니다. 이 기사는 el 이 DOM 요소 (예 : document.querySelector 를 통해 얻은)라고 가정 할 때 JavaScript에서 속성 값을 설정하고 검색하는 다양한 방법을 탐구합니다.

일부 속성은 DOM 객체의 속성으로 직접 액세스 할 수 있습니다. 예를 들어, id , title , lang , align 및 onclick 과 같은 이벤트 속성을 간단히 설정하고 검색 할 수 있습니다.

 el.id; // "시원한"
el.title = "내 제목";
el.title; // "내 제목";

style 속성은 비슷하지만 속성은 중첩됩니다.

 el.style.color = "빨간색";
el.style.backgroundColor = "Black";

인라인 스타일이 아닌 컴퓨팅 스타일을 얻으려면 window.getComputedStyle 사용하십시오.

 let style = window.getComputedStyle (el);
스타일 .color; // 계산 된 CSS 색상

그러나 모든 속성이 일류 시민은 아닙니다. aria-hidden 과 같은 속성의 경우 setAttribute 및 getAttribute 사용해야합니다.

 el.setattribute ( "Aria-Hidden", True);
el.getAttribute ( "Aria-Hidden");

특정 속성은 전문화 된 도우미 API를 제공합니다. classList 클래스 속성을 관리하기위한 편리한 방법을 제공합니다.

 el.classlist.value; // "module big"
el.classlist.length; // 2
el.classlist.add ( "cool"); // "모듈 Big Cool"
el.classlist.remove ( "big"); // "모듈 Cool"
el.classlist.toggle ( "big"); // "big"토글
el.classlist.contains ( "module"); // 진실

classList 어레이와 같은 동작으로 forEach 와 같은 메소드를 허용합니다.

data-* 속성의 경우 dataset 속성은보다 사용자 친화적 인 인터페이스를 제공합니다.

 el.dataset;
/*
{
  Active : "True",
  배치 : "오른쪽 상단"
}
*/

el.dataset.Active; // "진실"
el.dataset.extrawords; // "hi"(참고 Camelcase Conversion)
el.dataset.active = "false"; // 세터

이 개요는 DOM 속성과 상호 작용하는 다양한 방법을 보여 주며 효율적이고 올바른 조작을 위해 각 접근 방식의 뉘앙스를 이해하는 것의 중요성을 강조합니다.

위 내용은 DOM 요소의 속성 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!