Javascript|jQuery를 사용하여 특정 인라인 스타일 제거

Javascript|jQuery를 사용하여 특정 인라인 스타일 제거

HTML에 다음 코드가 있습니다.

<p id='foo' style='text-align:center; font-size:14pt; font-family:verdana; color:red'>hello world</p>

그리고 내 외부 CSS에 있는 것:

#foo{ font-size:11pt; font-family:arial; color:#000; }

모두 제거합니다.font-size그리고.font-family에서style속성, 그러나 그렇지 않습니다.color그리고 다른 것들은 외부 css로 설정됩니다.

예상 결과:

<p id='foo' style='text-align:center; color:red'>hello world</p>

이미 시도한 항목:

$('#foo').removeAttr('style');   // That removes all inline
$('#foo').css('font-family',''); // That remove the css setted too

jQuery를 사용하지 않는 경우 기본 removeProperty 메서드를 사용하여 인라인 스타일에서 특정 스타일을 삭제할 수 있습니다.예:

elem.style.removeProperty('font-family');

물론 IE < 9는 이를 지원하지 않으므로 사용해야 합니다.

elem.style.removeAttribute('font-family');

따라서 브라우저 간에 다음과 같은 작업을 수행할 수 있습니다.

if (elem.style.removeProperty) {
    elem.style.removeProperty('font-family');
} else {
    elem.style.removeAttribute('font-family');
}

속성을 다음으로 설정합니다.inherit:

$('#foo').css('font-family','inherit').css('font-size','inherit');

2019년에 자산을 제거하는 가장 간단한 방법은 다음과 같습니다.

elem.style.border = "";

마찬가지로 테두리를 설정하려면:

elem.style.outline = "1px solid blue";

모든 브라우저에서도 작동해야 합니다!

(마크업을 변경하지 않고) 이 문제에 대한 적절한 해결책은 없다고 생각합니다.스타일 특성의 값을 검색하고 바꿀 수 있습니다.

var element = $('#foo');
element.attr('style', element.attr('style').replace(/font-size:[^;]+/g, '').replace(/font-family:[^;]+/g, ''))

단연코 가장 좋은 해결책은 인라인 스타일을 없애고 클래스를 사용하여 스타일을 관리하는 것입니다.

제 제안은 인라인 스타일을 사용하여 이러한 설정을 하지 않는 것입니다.클래스를 사용한 다음 jQuery를 사용하여 클래스를 전환하는 것이 좋습니다.

CSS:

#foo{ font-size:11pt; font-family:arial; color:#000; }
#foo.highlight {text-align:center; font-size:14pt; font-family:verdana; color:red}

HTML:

<p id="foo" class="highlight">hello world</p>

Javascript:

$('#foo').removeClass('highlight');
$('#foo').addClass('highlight');

동적 인라인 스타일 추가 및 제거 속성

var check=()=>{
console.log('test')
var el=document.getElementById("id");

var condition=el.style['color']!=""?true:false;

if(condition){

el.style.removeProperty('color')

}
else{

el.style.color="red"

}


}

<div id="id" style="display:block">dynamic style</div>


<button onclick="check()">apply style</button>

제가 보기에 당신은 문단에 두 가지 다른 스타일이 정말 필요합니다.CSS로 설정한 다음 jQuery를 사용하여 필요에 따라 제거/추가하는 것이 더 쉬울 수 있습니다.

#styleOne { color: red; font: normal 14pt Verdana; text-align: center; }

#styleTwo{ color: #000; font: normal 11pt Arial; text-align: center; }

초기 html은 다음과 같습니다.

<p id="styleOne">hello world</p>

그런 다음 jQuery에서 styleTwo로 되돌리려면

$('p#styleOne').removeClass('styleOne').addClass('styleTwo');

언급URL : https://stackoverflow.com/questions/4033004/remove-a-specific-inline-style-with-javascriptjquery