[jquery] 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”, “상속”);