JavaScript로 모든 인라인 스타일을 지우고 CSS 스타일 시트에 지정된 스타일 만 남겨 두는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/1229688

  •  22-07-2019
  •  | 
  •  

문제

내 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가 필요하지 않습니다. 그냥 사용하십시오 .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 이상 / .querySelectorAll() -IE 8 (부분) IE9 이상.

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

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

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

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

당신이 그냥 비워야한다면 style 그러면 요소의 :
element.style.cssText = null;
이것은 좋을 것입니다. 도움이되기를 바랍니다!

이것은 두 단계로 달성 할 수 있습니다.

1 : TagName, ID, 클래스 등으로 변경하려는 요소를 선택하십시오.

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

  1. 스타일 속성을 제거하십시오

element.removeAttribute('style');

스타일 시트에 CSS를 나열하는 것도 중요합니다!

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top