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
'programing' 카테고리의 다른 글
판다: 범주를 숫자로 변환합니다. (0) | 2023.08.15 |
---|---|
왜 우리는 개인 건설업자가 필요합니까? (0) | 2023.08.15 |
개체에 추가 (0) | 2023.08.10 |
jQuery에서 하위 요소를 선택하는 가장 빠른 방법은 무엇입니까? (0) | 2023.08.10 |
Wi-Fi가 안드로이드에 연결되어 있는지 확인하려면 어떻게 해야 합니까? (0) | 2023.08.10 |