JavaScript를 사용하여 HTML 요소에 속성을 추가 / 업데이트하는 방법은 무엇입니까?

JavaScript를 사용하여 HTML 요소에 속성을 추가 / 업데이트하는 방법은 무엇입니까?

---

JavaScript를 사용하여 속성을 추가 / 업데이트하는 방법을 찾으려고합니다. setAttribute()함수로 할 수 있지만 IE에서는 작동하지 않습니다.

---

IE를 포함한 여러 브라우저에서 속성의 동작에 대해 여기에서 읽을 수 있습니다 .

element.setAttribute()IE에서도 트릭을 수행해야합니다. 해봤 어? 작동하지 않으면 작동 element.attributeName = 'value'할 수 있습니다.

---

완벽하게 호환되기를 원한다면 쉬운 것처럼 보이는 것이 실제로 까다 롭습니다.

var e = document.createElement('div');

추가 할 id가 'div1'이라고 가정 해 봅시다.

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')

이것들은 IE 5.5의 마지막 버전을 제외하고 모두 작동합니다 (이 시점의 고대 역사이지만 여전히 업데이트가없는 XP의 기본값입니다).

그러나 물론 우발적 인 상황이 있습니다. IE 8 이전에는 작동 e.attributes['style']하지 않습니다. 오류는 없지만 실제로 클래스를 설정하지는 않습니다 e['class']. className :이어야합니다 .
그러나 속성을 사용하는 경우 다음과 같이 작동합니다.e.attributes['class']

요약하면 속성을 리터럴 및 객체 지향으로 생각하십시오.

문자 그대로, 당신은 그것이 x = 'y'를 내뱉고 그것에 대해 생각하지 않기를 원합니다. 이것이 속성 인 setAttribute, createAttribute의 속성입니다 (IE 스타일 예외 제외). 그러나 이것들은 실제로 물건이기 때문에 혼란 스러울 수 있습니다.

jQuery innerHTML slop 대신 DOM 요소를 올바르게 작성하는 데 어려움을 겪기 때문에 하나를 처리하고 e.className = 'fooClass'및 e.id = 'fooID'를 고수합니다. 이것은 디자인 환경 설정이지만,이 경우 처리하려고하는 것은 객체가 당신에게 불리한 것 이외의 다른 것입니다.

다른 메소드와 마찬가지로 클래스를 클래스 화하지 않고 스타일이 객체임을 인식하여 style.width not style = "width : 50px"임을 인식하지 마십시오. 또한 tagName을 기억하십시오. 그러나 이것은 이미 createElement에 의해 설정되어 있으므로 걱정할 필요가 없습니다.

이것은 내가 원했던 것보다 길었지만 JS의 CSS 조작은 까다로운 사업입니다.

---

필수 jQuery 솔루션 . title속성을 찾아로 설정합니다 foo. id로 수행하므로 단일 요소를 선택하지만 선택기를 변경하여 컬렉션에서 동일한 속성을 쉽게 설정할 수 있습니다.

$('#element').attr( 'title', 'foo' );

---

속성으로 무엇을 하시겠습니까? html 속성입니까, 아니면 다른 것입니까?

대부분의 경우 간단히 속성으로 지정할 수 있습니다. 요소에 제목을 설정 하시겠습니까? element.title = "foo"할 것입니다.

자체 사용자 정의 JS 속성의 경우 DOM은 자연적으로 확장 가능합니다 (일명 expando = true). 간단한 결과는 element.myCustomFlag = foo문제없이 읽을 수 있고 나중에 읽을 수 있다는 것 입니다.

참고 URL : https://stackoverflow.com/questions/710275/how-to-add-update-an-attribute-to-an-html-element-using-javascript