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

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", "상속");

---

Actually the best way I have found to do this when having to do complex jquery based styling, for Example, if you have a modal that you need to display but it needs to calculate page offsets to get the correct parameters those will need to go into the a jQuery("x").css({}) function.

So here is the setting of the styles, the output of variables that have computed based on various factors.

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

In order to clear those styles. rather than setting something like

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

The simple way would be

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

When jquery manipulates elements on the dom, the styles are written to the element in the "style" attribute as if you were writing the styles inline. All you have to do is to clear that attribute and the item should reset to its original styles

Hope this helps

---

i have same prob too, just remove the value

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

---

If you don't want to use classes (which you really should), the only way to accomplish what you want is by saving the changing styles first:

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

// set style
// do your thing

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

---

I used the second solution of user147767

However, there is a typo here. It should be

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

not <= 0

I also changed this condition for:

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

as sometimes we add a css property over jQuery, and it's added in a different way for different browsers (i.e. the border property will be added as "border" for Firefox, and "border-top", "border-bottom" etc for IE).

---

Before adding a class you should check if it already had class with .hasClass() method

For your specific question. You should be putting your stuff in Cascading Stylesheet. It's best practice to separate design and functionality.

so the proposed solution of adding and removing class names is best practice.

however when you are manipulating elements you don't control of how they are rendered. removeAttr('style') is BEST way to remove all inline styles.

---

I modified user147767's solution a bit to make it possible to use strings, arrays and objects as input:

/*!
 * 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