.css () 함수로 추가 된 스타일을 어떻게 제거 할 수 있습니까?

jQuery로 CSS 를 변경 하고 입력 값을 기준으로 추가하는 스타일을 제거하고 싶습니다.

if(color != '000000') $("body").css("background-color", color); else // remove style ?

어떻게해야합니까?
위의 선은 색상 선택기를 사용하여 색상을 선택할 때마다 (예 : 마우스가 색상환 위로 움직일 때) 실행됩니다.

두 번째 참고 : CSS 파일 css("background-color", "none")에서 기본 스타일을 제거하기 때문에이 작업을 수행 할 수 없습니다 . jQuery 에 의해 추가 된 인라인 스타일 을 제거하고 싶습니다 .
background-color

속성을 빈 문자열로 변경하면 작업을 수행하는 것처럼 보입니다.

$.css("background-color", "");

허용 된 답변 은 작동하지만 style테스트에서 DOM에 빈 속성을 남깁니다 . 큰 문제는 없지만 모든 것을 제거합니다.

removeAttr( 'style' );

이것은 모든 동적 스타일을 제거하고 스타일 시트 스타일로 돌아 가기를 원한다고 가정합니다.

jQuery를 사용하여 CSS 속성을 제거하는 방법에는 여러 가지가 있습니다.

1. CSS 속성을 기본 (초기) 값으로 설정

.css("background-color", "transparent")

MDN의 CSS 속성에 대한 초기 값을 참조하십시오 . 여기서 기본값은 transparent입니다. inherit여러 CSS 속성을 사용 하여 부모로부터 특성을 상속 할 수도 있습니다 . CSS3 / CSS4, 당신은 또한 사용할 수 있습니다 initial, revert또는 unset그러나이 키워드는 제한된 브라우저 지원이있을 수 있습니다.

2. CSS 속성 제거

빈 문자열은 CSS 속성을 제거합니다. 즉

.css("background-color","")

그러나 jQuery .css () documentation에 지정된대로 이것은 속성을 제거하지만 background를 포함한 특정 CSS 속기 속성에 대해 IE8과 호환 문제가 있습니다.

스타일 속성 값을 빈 문자열로 설정하면 (예 : $ ( '# mydiv'). css ( 'color', '')) HTML 스타일에 관계없이 해당 속성이 요소에 이미 적용된 경우 해당 속성을 제거합니다. 속성, jQuery의 .css () 메소드 또는 스타일 속성의 직접적인 DOM 조작을 통해. 그러나 스타일 시트 또는 요소에서 CSS 규칙으로 적용된 스타일은 제거하지 않습니다. 경고 : 주목할만한 예외는 IE 8 이하의 경우 테두리 또는 배경과 같은 속기 속성을 제거하면 스타일 시트 또는 element에 설정된 내용에 관계없이 해당 스타일을 요소에서 완전히 제거한다는 것입니다 .

3. 요소의 전체 스타일 제거

.removeAttr("style")

순수한 JavaScript의 방법을 알려주기 위해 순수한 JavaScript로 스타일 속성을 제거하는 방법을 얻었습니다.

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');

이것은 완전한 태그를 제거합니다 :

  $("body").removeAttr("style");

이 jQuery 함수 중 하나가 작동해야합니다.

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 

그냥 사용 :

$('.tag-class').removeAttr('style');

또는

$('#tag-id').removeAttr('style');

어때요?

var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}

내 플러그인 사용 :

$.fn.removeCss=function(all){
        if(all===true){
            $(this).removeAttr('class');
        }
        return $(this).removeAttr('style')
    }

귀하의 경우 다음과 같이 사용하십시오.

$(<mySelector>).removeCss();

또는

$(<mySelector>).removeCss(false);

클래스에 정의 된 CSS도 제거하려면 다음을 수행하십시오.

$(<mySelector>).removeCss(true);

이 시도:

$('#divID').css({"background":"none"});// remove existing

$('#divID').css({"background":"#bada55"});// add new color here.

감사

CSS 스타일을 사용하면 다음을 사용할 수 있습니다.

$("#element").css("background-color","none"); 

그런 다음 다음으로 바꿉니다.

$("#element").css("background-color", color);

CSS 스타일을 사용하지 않고 HTML 요소에 속성이있는 경우 다음을 사용할 수 있습니다.

$("#element").attr("style.background-color",color);

2018 년

그것에 대한 기본 API가 있습니다

element.style.removeProperty(propery)

이것도 효과가 있습니다 !!

$elem.attr('style','');

CSS 클래스를 제거하려는 스타일을 만들어 보시겠습니까? 이제 다음을 사용할 수 있습니다 .removeClass().. 이것은 또한 다음을 사용할 가능성을 열어줍니다..toggleClass()

클래스가 있으면 제거하고 없으면 클래스를 추가하십시오.

클래스를 추가 / 제거하면 레이아웃 문제를 처리 할 때 특정 스타일이 사라진 이유를 파악하려는 것과 달리 변경 / 문제 해결에 혼동을 줄입니다.

let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))

이것은 다른 솔루션보다 복잡하지만 시나리오에서 더 많은 유연성을 제공 할 수 있습니다.

1) 선택적으로 적용 / 제거하려는 스타일을 격리 (캡슐화)하도록 클래스 정의를 만듭니다. 비어있을 수 있습니다 (이 경우 아마도 있어야합니다).

.myColor {}

2)에 따라이 코드를 사용 http://jsfiddle.net/kdp5V/167/을 에서 이 대답 하여 gilly3 :

function changeCSSRule(styleSelector,property,value) {
    for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) {
        var ss = document.styleSheets[ssIdx];
        var rules = ss.cssRules || ss.rules;
        if(rules){
            for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) {
                var rule = rules[ruleIdx];
                if (rule.selectorText == styleSelector) {
                    if(typeof value == 'undefined' || !value){
                        rule.style.removeProperty(property);
                    } else {
                        rule.style.setProperty(property,value);
                    }
                    return; // stops at FIRST occurrence of this styleSelector
                }
            }
        }
    }
}

사용 예 : http://jsfiddle.net/qvkwhtow/

주의 사항 :

• 광범위하게 테스트되지 않았습니다.
• 중요 하거나 다른 지시문을 새 값에 포함 할 수 없습니다 . 이러한 기존 지시문은이 조작을 통해 유실됩니다.
• styleSelector가 처음 발견 된 항목 만 변경합니다. 전체 스타일을 추가하거나 제거하지는 않지만보다 정교한 작업으로 수행 할 수 있습니다.
• 유효하지 않거나 사용할 수없는 값은 무시되거나 오류가 발생합니다.
• Chrome (적어도)에서 로컬이 아닌 (사이트 간) CSS 규칙은 document.styleSheets 객체를 통해 노출되지 않으므로 작동하지 않습니다. 이 코드의 "처음 발견 된"동작을 염두에두고 로컬 재정의를 추가하고 조작해야합니다.
• document.styleSheets는 일반적으로 조작에 특히 친숙하지 않으므로 적극적으로 사용하기를 기대하지 마십시오.

이러한 방식으로 스타일링을 분리하는 것은 CSS를 조작하는 것이 아니더라도 CSS의 모든 것입니다. CSS 규칙을 다루는 것은 jQuery가 아닌 jQuery는 DOM 요소를 다루며 CSS 선택기를 사용하여 수행합니다.

웹 개발은 단순하다. 특정 스타일을 제거 할 때 빈 문자열을 사용하는 것이 좋습니다

$(element).style.attr = '  ';

이 시도

$(".ClassName").css('color','');
Or 
$("#Idname").css('color','');