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.

*/

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

Answer 6

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

Answer 7

设置默认值，例如：

$（this）.css（“height”，“auto”）;

或其他CSS功能

$（this）.css（“height”，“inherit”）;

Answer 8

我也有同样的问题，只需删除值

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

Answer 9

实际上，当我不得不进行复杂的基于jquery的样式时，我发现这是最好的方法，例如，如果你有一个需要显示的模态但需要计算页面偏移以获得那些需要的正确参数进入jQuery（＆＃34; x＆＃34;）。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上的元素时，样式将被写入＆＃34; style＆＃34;中的元素。属性就像你在内联编写样式一样。您所要做的就是清除该属性，项目应重置为原始样式

希望这有帮助

Answer 10

如果您不想使用类（您确实应该使用），那么实现您想要的唯一方法是首先保存更改的样式：

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

// set style
// do your thing

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

Answer 11

我使用了user147767的第二个解决方案

然而，这里有一个错字。它应该是

curCssName.toUpperCase（）。的indexOf（cssName.toUpperCase（） +'：'）＆lt; 0

不是＆lt; = 0

我也改变了这个条件：

！curCssName.match（new RegExp（cssName +。） “（ - 。+）？：”），“mi”）

因为有时候我们会在jQuery上添加一个css属性，并且它会以不同的方式添加到不同的浏览器中（例如，border属性将添加为Firefox的“border”，“border-top”，“border-bottom”等IE）。

Answer 12

在添加类之前，您应该检查它是否已经具有.hasClass（）方法的类

针对您的具体问题。你应该把你的东西放在层叠样式表中。将设计和功能分开是最佳实践。

所以建议的添加和删除类名的解决方案是最佳实践。

然而，当你操纵元素时，你无法控制它们的渲染方式。 removeAttr（'style'）是删除所有内联样式的最佳方法。

Answer 13

我稍微修改了user147767的solution，以便可以使用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/

使用JQuery从Div中删除CSS

13 个答案: