使用JQuery从Div中删除CSS

Question

我是JQuery的新手.在我的应用程序中,我有以下内容:

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

当我点击Div时,该Div的颜色会发生变化.在Click函数中,我有一些功能要做.毕竟我想从Div中移除已应用的Css.我怎么能在JQuery中做到这一点？

Answer 1

您可以删除元素上的特定css,如下所示:

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

虽然我同意karim你应该使用CSS类.

Answer 2

如果要删除使用javascript手动添加的所有内联样式,可以使用removeAttr方法.最好使用CSS类,但你永远不知道.

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

Answer 3

将CSS属性放入类中,然后执行以下操作:

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

那么你的"其他功能"是这样的:

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

Answer 4

您可以通过以下方式删除内联属性:

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

例如:

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

这基本上是上面提到的,它绝对可以解决问题.

顺便说一下,这在诸如需要在动画之后清除状态的情况下很有用.当然我可以编写六个类来处理这个问题,或者我可以使用我的基类和#id做一些数学运算,并清除动画应用的内联样式.

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

Answer 5

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

Answer 6

作为注释,根据属性,您可以将其设置为自动.

Answer 7

设置默认值,例如:

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

或者在其他CSS功能的情况下

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

Answer 8

实际上，这是我必须进行基于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”属性中的元素，就像您是内联编写样式一样。您要做的就是清除该属性，并且该项目应重置为原始样式

希望这可以帮助