[Dseok의 코딩스터디] JavaScript & jQuery를 사용하여 인라인 CSS 속성 제거하는 5가지 방법

📌 개요

웹 개발을 하다 보면 특정 요소의 인라인 스타일을 제거해야 할 때가 있습니다.
인라인 스타일(style="color: red;")을 직접 추가하는 경우, CSS 파일보다 우선순위가 높아 쉽게 덮어쓰기 어렵습니다.
이 문제를 해결하는 JavaScript 및 jQuery의 5가지 방법을 소개합니다!

 

📌 1. removeAttribute('style') 사용 (JavaScript)

가장 쉬운 방법으로, 요소의 style 속성을 완전히 제거합니다.

<button id="resetStyle">스타일 제거</button>
<p id="text" style="color: red; font-size: 20px;">안녕하세요!</p>

<script>
document.getElementById("resetStyle").addEventListener("click", function() {
    document.getElementById("text").removeAttribute("style");
});
</script>

✅ 설명: removeAttribute("style")을 사용하면 모든 인라인 스타일이 제거됩니다.

 

removeAttr() 이 속성에 대해서는 조만간 자세히 알아보겠지만 여기서 간단히 알아보겠습니다.

 

removeAttribute()는 HTML 요소의 특정 속성을 제거하는 JavaScript 메서드입니다.
즉, <div id="box" style="color: red;">와 같은 요소에서 특정 속성(예: style, id 등)을 삭제할 때 사용됩니다.

 

✅ removeAttr() 기본 문법

element.removeAttribute("속성이름");

• element : 속성을 제거할 대상 요소
• "속성이름" : 삭제할 속성의 이름

📌 2. style.cssText = "" 사용 (JavaScript)

인라인 스타일을 직접 비우는 방식입니다.

<script>
document.getElementById("text").style.cssText = "";
</script>

✅ 설명: cssText = ""는 스타일 속성을 초기화하는 효과를 가집니다.

 

📌 3. 특정 스타일만 제거하기 (JavaScript)

<script>
document.getElementById("text").style.color = "";
</script>

✅ 설명: style.color = "";을 사용하면 특정 속성만 제거할 수 있습니다.

 

📌 4. jQuery의 .removeAttr('style') 사용

<script>
$("#text").removeAttr("style");
</script>

✅ 설명: removeAttr("style")을 사용하면 모든 인라인 스타일이 제거됩니다.

 

removeAttr()는 jQuery에서 특정 요소의 속성을 제거하는 메서드입니다.

$("요소").removeAttr("속성이름");

📌 5. jQuery의 .css(property, '') 사용

<script>
$("#text").css("color", "");
</script>

✅ 설명: 특정 스타일 속성만 초기화할 때 유용합니다.

 

📌 마무리 🎯

1. removeAttribute("style") → 전체 인라인 스타일 제거
2. style.cssText = "" → 모든 스타일 초기화
3. style.property = "" → 특정 스타일만 제거
4. jQuery .removeAttr("style") → jQuery 방식으로 전체 스타일 제거
5. jQuery .css("property", "") → jQuery 방식으로 특정 스타일 초기화