JQuery를 사용하여 Div에서 CSS 제거

JQuery를 처음 사용합니다. 내 앱에는 다음이 있습니다.

$("#displayPanel div").live("click", function(){
  $(this).css({'background-color' : 'pink', 'font-weight' : 'bolder'});
});

Div를 클릭하면 해당 Div의 색상이 변경됩니다. 그 클릭 기능에는 몇 가지 기능이 있습니다. 결국 Div에서 적용된 CSS를 제거하고 싶습니다. JQuery에서 어떻게 할 수 있습니까?

CSS 속성을 클래스에 넣고 다음과 같이하십시오.

$("#displayPanel div").live("click", function(){
   $(this).addClass('someClass');
});

그런 다음 '다른 기능'은 다음과 같은 작업을 수행합니다.

$("#myButton").click(function(){
   $("#displayPanel div").removeClass('someClass');
});

다음과 같이 요소에있는 특정 CSS를 제거 할 수 있습니다.

$(this).css({'background-color' : '', 'font-weight' : ''});

나는 CSS 클래스를 사용해야한다고 karim에 동의하지만.

javascript로 수동으로 추가 한 모든 인라인 스타일을 삭제하려는 경우 removeAttr 메소드를 사용할 수 있습니다. CSS 클래스를 사용하는 것이 좋지만 알 수 없습니다.

$("#displayPanel div").removeAttr("style")

이 방법으로 인라인 속성을 제거 할 수 있습니다.

$(selector).css({'property':'', 'property':''});

예를 들면 다음과 같습니다.

$(actpar).css({'top':'', 'opacity':''});

이것은 본질적으로 위에서 언급되었으며 분명히 트릭을 수행합니다.

BTW는 애니메이션 후 상태를 지워야하는 경우에 유용합니다. 물론이 문제를 처리하기 위해 6 개의 클래스를 작성하거나 기본 클래스와 #id를 사용하여 수학을 수행하고 애니메이션이 적용하는 인라인 스타일을 지울 수 있습니다.

$(actpar).animate({top:0, opacity:1, duration:500}, function() {
   $(this).css({'top':'', 'opacity':''});
});

jQuery.fn.extend
({
    removeCss: function(cssName) {
        return this.each(function() {
            var curDom = $(this);
            jQuery.grep(cssName.split(","),
                    function(cssToBeRemoved) {
                        curDom.css(cssToBeRemoved, '');
                    });
            return curDom;
        });
    }
});

/*example code: I prefer JQuery extend so I can use it anywhere I want to use.

$('#searchJqueryObject').removeCss('background-color');
$('#searchJqueryObject').removeCss('background-color,height,width'); //supports comma separated css names.

*/

또는

//this parse style & remove style & rebuild style. I like the first one.. but anyway exploring..
jQuery.fn.extend
({
    removeCSS: function(cssName) {
        return this.each(function() {

            return $(this).attr('style',

            jQuery.grep($(this).attr('style').split(";"),
                    function(curCssName) {
                        if (curCssName.toUpperCase().indexOf(cssName.toUpperCase() + ':') <= 0)
                            return curCssName;
                    }).join(";"));
        });
    }
});

참고로, 속성에 따라 자동으로 설정할 수 있습니다.

예를 들어, 기본값을 설정하십시오.

$ (this) .css ( "height", "auto");

또는 다른 CSS 기능의 경우

$ (this) .css ( "height", "상속");

실제로 복잡한 jquery 기반 스타일링을 수행 할 때이 작업을 수행하는 가장 좋은 방법은 예를 들어 표시 해야하는 모달이 있지만 올바른 매개 변수를 얻기 위해 페이지 오프셋을 계산 해야하는 경우 jQuery ( "x"). css ({}) 함수

여기 다양한 스타일을 기반으로 계산 된 변수의 출력 인 스타일 설정이 있습니다.

$(".modal").css({ border: "1px solid #ccc", padding: "3rem", position: "absolute", zIndex: 999, background: "#fff", top: "30", visibility: "visible"})

이러한 스타일을 지우려면 같은 것을 설정하는 대신

$(".modal").css({ border: "", padding: "", position: "", zIndex: 0, background: "", top: "", visibility: ""})

간단한 방법은

$(".modal").attr("style", "")

jquery가 dom의 요소를 조작 할 때 스타일을 인라인으로 작성하는 것처럼 스타일이 "style"속성의 요소에 작성됩니다. 해당 속성을 지우고 항목을 원래 스타일로 재설정하기 만하면됩니다.

도움이 되었기를 바랍니다

나도 같은 조사를하고 값을 제거하십시오.

<script>
      $("#play").toggle(function(){$(this).css("background","url(player.png) -100px 0px no-repeat");},
      function(){$(this).css("background","");});
</script>

클래스를 사용하지 않으려는 경우 (실제로 필요한) 클래스를 변경하는 유일한 방법은 변경 스타일을 먼저 저장하는 것입니다.

var oldFontSize = $(this).css("font-size");
var oldBackgroundColor = $(this).css("background-color");

// set style
// do your thing

$(this).css("font-size",oldFontSize);
// etc...

user147767의 두 번째 솔루션을 사용했습니다.

그러나 오타가 있습니다. 그것은해야한다

curCssName.toUpperCase (). indexOf (cssName.toUpperCase () + ':') <0

<= 0이 아님

또한이 조건을 다음과 같이 변경했습니다.

! curCssName.match (새로운 RegExp (cssName + "(-. +) ?:"), "mi")

때로는 jQuery에 CSS 속성을 추가하고 브라우저마다 다른 방식으로 추가됩니다 (예 : border 속성은 Firefox의 경우 "테두리"로, IE의 경우 "테두리 상단", "테두리-하단"등으로 추가됨) ).

클래스를 추가하기 전에 .hasClass () 메소드가있는 클래스가 있는지 확인해야합니다.

특정 질문에 대해 캐스 케이 딩 스타일 시트에 물건을 넣어야합니다. 디자인과 기능을 분리하는 것이 가장 좋습니다.

따라서 클래스 이름을 추가하고 제거하는 제안 된 솔루션이 가장 좋습니다.

그러나 요소를 조작 할 때는 렌더링 방식을 제어 할 수 없습니다. removeAttr ( 'style')은 모든 인라인 스타일을 제거하는 가장 좋은 방법입니다.

나는 user147767의 수정 솔루션 이 가능 사용할 수 있도록 조금 strings, arrays및 objects입력으로 :

/*!
 * jquery.removecss.js v0.2 - https://stackoverflow.com/a/17196154/1250044
 * Remove multiple properties from an element in your DOM.
 *
 * @author Yannick Albert | #yckart
 * @param {Array|Object|String} css
 *
 * Copyright (c) 2013 Yannick Albert (http://yckart.com)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
 * 2013/06/19
 **/

$.fn.removeCss = function (css) {
    var properties = [];
    var is = $.type(css);

    if (is === 'array') properties = css;
    if (is === 'object') for (var rule in css) properties.push(rule);
    if (is === 'string') properties = css.replace(/,$/, '').split(',');

    return this.each(function () {
        var $this = $(this);
        $.map(properties, function (prop) {
            $this.css(prop, '');
        });
    });
};

// set some styling
$('body').css({
    color: 'white',
    border: '1px solid red',
    background: 'red'
});

// remove it again
$('body').removeCss('background');
$('body').removeCss(['border']);
$('body').removeCss({
    color: 'white'
});

http://jsfiddle.net/ARTsinn/88mJF/