자바 스크립트로 모든 인라인 스타일을 지우고 CSS 스타일 시트에 지정된 스타일 만 남기려면 어떻게해야합니까?

내 HTML에 다음이있는 경우 :

<div style="height:300px; width:300px; background-color:#ffffff;"></div>

그리고 이것은 내 CSS 스타일 시트에 있습니다.

div {
    width:100px;
    height:100px;
    background-color:#000000;
}

javascript / jquery를 사용하여 모든 인라인 스타일을 제거하고 CSS 스타일 시트에 지정된 스타일 만 남겨 두는 방법이 있습니까?

$('div').attr('style', '');

또는

$('div').removeAttr('style');( Andres의 답변에서 )

이것을 조금 더 작게 만들려면 다음을 시도하십시오.

$('div[style]').removeAttr('style');

div에 스타일 속성이 있는지 확인하므로 속도가 약간 빨라집니다.

어느 쪽이든 div가 많은 경우 처리하는 데 약간의 시간이 걸릴 수 있으므로 자바 스크립트 이외의 다른 방법을 고려할 수 있습니다.

일반 JavaScript :

이와 같은 사소한 작업을 수행하기 위해 jQuery가 필요하지 않습니다. .removeAttribute()방법을 사용하십시오 .

단일 요소를 대상으로한다고 가정하면 다음을 쉽게 사용할 수 있습니다. (예)

document.querySelector('#target').removeAttribute('style');

여러 요소를 대상으로하는 경우 선택한 요소 컬렉션을 반복합니다 (예).

var target = document.querySelectorAll('div');
Array.prototype.forEach.call(target, function(element){
    element.removeAttribute('style');
});

Array.prototype.forEach()-IE9 이상 /-IE .querySelectorAll()8 (일부) IE9 이상.

$('div').removeAttr('style');

이 $('div').attr('style', '');기술 을 사용하고 있었는데 IE8에서 작동하지 않았습니다.

사용하여 스타일 속성을 출력 alert()했지만 인라인 스타일을 제거하지 않았습니다.

.removeAttr 결국 IE8에서 트릭을 수행했습니다.

style요소를 비워야하는 경우 다음
element.style.cssText = null;
을 수행하십시오. 도움이 되었기를 바랍니다.

이는 다음 두 단계로 수행 할 수 있습니다.

1 : 태그 이름, ID, 클래스 등으로 변경하려는 요소를 선택합니다.

var element = document.getElementsByTagName('h2')[0];

2. 스타일 속성 제거

element.removeAttribute('style');

스타일 시트에 CSS를! important로 나열 할 수도 있습니다.