요소 attribute_javascript 기술을 획득, 설정 및 제거하는 JavaScript 세 가지 방법

다음 html을 예로 들어보세요

코드 복사 코드는 다음과 같습니다.

< ;div id=" myDiv" class="bd" title="나는 div입니다">

Baidu

1. HTMLElement 유형(객체)의 속성을 통해 요소 속성을 얻고 설정합니다. 🎜>

코드 복사 코드는 다음과 같습니다.

var div = document.getElementById("myDiv" );
var img = document.getElementById("img1");
var a = document.getElementById("myA")
//요소 속성 가져오기
alert(div.id); //"myDiv"
Alert(div.className); //"bd", class는 예약어이므로 div.class가 아닙니다.
alert(div.title); "
alert(a.href); //http://www.baidu.com
//요소 속성 설정
div.id = "myDiv2"; //id를 "myDiv2"로 변경
div.className = "ft "; //클래스가 "ft"로 변경됩니다. "ft"라는 스타일이 있으면 즉시 "ft" 스타일로 변경되며 브라우저가 즉시 응답합니다
div.title = "I am myDiv2"; / /title이 "I am myDiv2"로 변경됩니다.
div.align = "center"; //가운데 정렬 설정
img.src ="images/img1.gif "; //이미지 경로 설정
a.innerHTML = "Sina"; //"Baidu"가 "Sina"로 변경됩니다.
a.href = "http://www.sina.com.cn"; //하이퍼링크 재설정

2. getAttribute(), setAttribute() 및 RemoveAttribute() 메소드를 통해 요소의 특성을 가져오고 설정하고 제거합니다(권장되지 않음, 처음 두 메소드는 IE6 및 7의 예외 및 세 번째 방법은 IE6에서 지원되지 않으므로 사용자 정의 속성을 설정할 때 사용할 수 있습니다)
getAttribute() 메서드는 요소 속성을 가져오는 데 사용됩니다. 요소의 속성 이름을 가져오는 하나의 매개 변수를 허용합니다.
setAttribute() 메서드는 요소의 속성을 설정하는 데 사용됩니다. 요소의 속성 이름과 속성 값을 가져오는 두 가지 매개 변수를 허용합니다.
removeAttribute() 메서드는 요소의 속성을 제거하는 데 사용됩니다. 제거할 요소의 속성 이름인 하나의 매개변수를 허용합니다.

코드 복사 코드는 다음과 같습니다.

var div = document.getElementById("myDiv");
var img = document.getElementById("img1")
var a = document.getElementById("myA"); >//요소 속성 가져오기
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")) //"bd" className이 아니라 클래스입니다. 위와 다릅니다
alert(div.getAttribute("title")); //"나는 div입니다"
alert(a.getAttribute("href")) //http ://www.baidu.com
//요소 속성 설정
div.setAttribute("id","myDiv2"); //id를 "myDiv2"로 변경
div.setAttribute("class" ,"ft"); / /class는 "ft"로 변경됩니다. 여기서도 className이 아니라 클래스입니다.
div.setAttribute("title","I am myDiv2") //title은 "I로 변경됩니다. am myDiv2"
div.setAttribute ("align","center"); //가운데 정렬 설정
img.setAttribute("src","images/img1.gif"); //이미지 경로 설정
//요소 속성 제거
div.removeAttribute("class"); //클래스 속성 제거


3. 속성을 통해 요소의 속성을 가져오고 설정하고 제거합니다. 속성

코드 복사 코드는 다음과 같습니다.

var div = document.getElementById(" myDiv");

//요소 속성 가져오기
alert(div.attributes["id"].nodeValue); //"myDiv"
//요소 속성 설정
div.attributes[" id"].nodeValue = "myDiv2"; //id "myDiv2"로 변경
//요소 속성 제거
div.attributes.removeNamedItem("class"); //클래스 속성 제거