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

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

내 앱에는 다음이 있습니다.

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

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

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

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

비록 당신이 아마도 CSS 수업을 사용해야 한다는 카림의 의견에 동의합니다.

javascript로 수동으로 추가한 인라인 스타일을 모두 삭제하려면 removeAttr 메서드를 사용할 수 있습니다.CSS 수업을 사용하는 것이 더 좋지만 당신은 절대 모릅니다.

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

CSS 속성을 클래스에 넣고 다음과 같은 작업을 수행합니다.

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

그런 다음 '기타 기능'이 있는 곳에서는 다음과 같은 작업을 수행합니다.

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

다음과 같은 방법으로 인라인 속성을 제거할 수 있습니다.

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

예:

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

이것은 본질적으로 위에서 언급되었고, 확실히 효과가 있습니다.

참고로 애니메이션 후 상태를 지워야 하는 경우와 같은 경우에 유용합니다.물론 이 문제를 해결하기 위해 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.

*/

OR

//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(";"));
        });
    }
});

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

사실 복잡한 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가 돔의 요소를 조작할 때 스타일은 스타일을 인라인으로 작성하는 것처럼 "스타일" 특성의 요소에 작성됩니다.속성을 지우고 항목을 원래 스타일로 재설정하기만 하면 됩니다.

이것이 도움이 되길 바랍니다.

다음과 같이 기본값을 설정합니다.

$(이것). ("높이", "자동";

또는 다른 CSS 기능의 경우

$(이것). "높이", "높이";

나도 같은 확률을 가지고 있어요, 그냥 값을 제거하세요.

<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...

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

하지만 여기 오타가 있습니다.그럴 것 같네요.

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

<= 0이 아님

다음에 대해서도 이 조건을 변경했습니다.

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

때때로 우리가 jQuery 위에 css 속성을 추가하기 때문에, 그것은 다른 브라우저에 대해 다른 방식으로 추가됩니다(즉, 경계 속성은 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/

언급URL : https://stackoverflow.com/questions/955030/remove-css-from-a-div-using-jquery