JavaScript로 모든 인라인 스타일을 지우고 CSS 스타일 시트에 지정된 스타일 만 남겨 두는 방법은 무엇입니까?
-
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];
- 스타일 속성을 제거하십시오
element.removeAttribute('style');
스타일 시트에 CSS를 나열하는 것도 중요합니다!