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

자바스크립트로 모든 인라인 스타일을 지우고 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');(안드레스의 답변에서)

이 값을 조금 작게 만들려면 다음을 수행합니다.

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

이렇게 하면 div가 스타일 속성을 가지고 있는지 확인하기 때문에 속도가 약간 빨라집니다.

어느 쪽이든, 만약 당신이 많은 양의 div를 가지고 있다면, 이것은 처리하는 데 약간의 시간이 걸릴 수 있으므로, 당신은 javascript가 아닌 다른 방법을 고려하는 것이 좋을 것입니다.

일반 자바스크립트:

이런 사소한 일을 하기 위해 jQuery가 필요하지 않습니다.그냥 방법을 사용하세요.

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

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

여러 요소를 대상으로 하는 경우 선택한 요소 모음을 반복하면 됩니다. (예)

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

Array.prototype.forEach() IE9 이상 / - IE8(부분) IE9 이상.

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

제가 사용한 것입니다.$('div').attr('style', '');IE8에서는 작동하지 않았습니다.

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

.removeAttr결국 IE8에서 속임수를 썼습니다.

이 작업은 두 단계로 수행할 수 있습니다.

1: 태그 이름, ID, 클래스 등을 사용하여 변경할 요소를 선택합니다.

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

2. 스타일 특성 제거

element.removeAttribute('style');

만약 당신이 단지 비워야 한다면.style요소의 경우:
element.style.cssText = null;
이것은 좋을 것입니다.도움이 되길 바랍니다!

당신은 또한 스타일시트에 있는 css를 !important로 나열해볼 수 있습니다.

언급URL : https://stackoverflow.com/questions/1229688/how-can-i-erase-all-inline-styles-with-javascript-and-leave-only-the-styles-spec