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')

그러나 물론 우발적 인 상황이 있습니다. 8 이전의 IE에서는 작동 e.attributes['style'] 하지 않습니다. 오류는 없지만 실제로 클래스를 설정하지는 않으며 className :이어야합니다 e['class'].
그러나 속성을 사용하는 경우 다음과 같이 작동합니다.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문제없이 읽을 수 있고 나중에 읽을 수 있다는 것 입니다.