그만큼 setAttribute() 메소드는 특정 요소에 속성을 설정하거나 추가하고 해당 요소에 값을 제공하는 데 사용됩니다. 속성이 이미 존재하는 경우 속성 값만 설정하거나 변경합니다. 따라서 우리는 다음을 사용할 수도 있습니다. setAttribute() 기존 속성의 값을 업데이트하는 방법입니다. 해당 속성이 존재하지 않으면 지정된 이름과 값을 가진 새 속성이 생성됩니다. 이 메서드는 어떤 값도 반환하지 않습니다. 속성 이름은 HTML 요소에서 사용할 때 자동으로 소문자로 변환됩니다.
우리는 스타일 속성을 사용하여 setAttribute() 방법이지만 스타일링에는 이 방법을 사용하지 않는 것이 좋습니다. 스타일을 추가하기 위해 스타일을 효과적으로 변경하는 스타일 개체의 속성을 사용할 수 있습니다. 다음 코드를 사용하면 명확해질 수 있습니다.
잘못된 방법
스타일을 변경하는 데 사용하지 않는 것이 좋습니다.
문자열을 자바와 비교
element.setAttribute('style', 'background-color: blue;');
올바른 방법
스타일을 변경하는 올바른 방법은 다음과 같습니다.
element.setAttribute.backgroundColor = 'blue';
속성의 값을 얻으려면 다음을 사용할 수 있습니다. get속성() 메소드를 사용하고 요소에서 특정 속성을 제거하려면 제거속성() 방법.
다음과 같은 부울 속성을 추가하는 경우 장애가 있는 , 그 값이 무엇이든 항상 다음과 같이 간주됩니다. 진실 . Boolean 속성의 값을 다음으로 설정해야 하는 경우 거짓 , 다음을 사용하여 전체 속성을 제거해야 합니다. 제거속성() 방법 .
통사론
element.setAttribute(attributeName, attributeValue)
이 메서드의 인수는 선택 사항이 아닙니다. 이 방법을 사용할 때는 두 매개변수가 모두 포함되어야 합니다. 이 메소드의 매개변수 값은 다음과 같이 정의됩니다.
매개변수 값
속성이름: 요소에 추가하려는 속성의 이름입니다. 비워 둘 수 없습니다. 즉, 선택사항이 아닙니다.
속성값: 요소에 추가하는 속성의 값입니다. 또한 선택적인 값도 아닙니다.
사용법을 알아보자 setAttribute() 몇 가지 그림을 사용하여 방법.
실시예 1
이 예에서는 href 값이 있는 속성 'https://www.javatpoint.com/' ~로 태그를 달다 아이디 = '링크' .
JavaScript setAttribute() method function fun() { document.getElementById('link').setAttribute('href', 'https://www.javatpoint.com/'); } <h2> It is an example of adding an attribute using the setAttribute() method. </h2> <a id="link"> javaTpoint.com </a> <p> Click the follwing button to see the effect. </p> Add attribute 지금 테스트해보세요 산출
위 코드를 실행한 후 출력은 다음과 같습니다.
주어진 버튼을 클릭하기 전에는 링크가 생성되지 않는 것을 볼 수 있습니다. 버튼을 클릭하면 출력은 다음과 같습니다.
이제 링크가 생성된 것을 볼 수 있습니다.
실시예2
이 예에서는 다음을 사용하여 기존 속성의 값을 업데이트합니다. setAttribute() 방법. 여기서는 값을 변경하여 텍스트 필드를 버튼으로 변환합니다. 유형 의 속성 텍스트 에게 단추 .
효과를 보려면 지정된 버튼을 클릭해야 합니다.
JavaScript setAttribute() method function fun() { document.getElementById('change').setAttribute('type', 'button'); } <h2> It is an example to update an attribute's value using the setAttribute() method. </h2> <p> Click the follwing button to see the effect. </p> Change 지금 테스트해보세요 산출
위 코드를 실행한 후 출력은 다음과 같습니다.
버튼을 클릭하면 출력은 다음과 같습니다.
여우 대 늑대
실시예3
여기서는 부울 속성을 추가합니다. 장애가 있는 지정된 버튼을 비활성화합니다. 값을 설정하면 장애가 있는 속성을 빈 문자열로 설정하면 자동으로 true로 설정되어 버튼이 비활성화됩니다.
JavaScript setAttribute() method function fun() { document.getElementById('btn').setAttribute('disabled', ''); } <h2> Example of the setAttribute() method. </h2> <p> Click the following button to see the effect </p> Click me 지금 테스트해보세요 산출
위 코드를 실행한 후 출력은 다음과 같습니다.
버튼을 클릭하면 출력은 다음과 같습니다.
