使用 JQuery 从 Div 中删除 CSS

Posted 2023-03-06

【中文标题】使用 JQuery 从 Div 中删除 CSS

【英文标题】：Remove CSS from a Div using JQuery

【发布时间】：2010-10-31 14:24:21

【问题描述】：

我是 JQuery 的新手。在我的应用程序中，我有以下内容：

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

当我点击一个 Div 时，该 Div 的颜色会改变。在那个 Click 函数中，我有一些功能要做。毕竟我想从 Div 中删除应用的 Css。我怎么能在 JQuery 中做到这一点？

【问题讨论】：

小子，你打开了一罐虫子！

【参考方案1】：

您可以像这样删除元素上的特定 css：

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

虽然我同意 karim 的观点，您可能应该使用 CSS 类。

【讨论】：

这将删除之前的背景颜色和字体粗细设置

@Dave 在 IE7 中为我提供了出色的工作删除直接应用于元素的样式，而不是删除通过 css 类应用的样式。

问题是当将背景设置为''时，IE7 很乐意为所有不同的背景-* 属性添加默认值。这意味着如果您设置了 background-* 属性（例如通过类），它们会被清除。我必须在我们的产品中处理这个特定问题。

对我来说效果很好，尽管我最终使用了 addClass，因为样式应该在样式表中完成。我个人喜欢让事情井井有条。

请注意，这与 $element.css('top', ''); 不同，后者不会删除样式。你必须传入一个对象：$element.css('top: '');

【参考方案2】：

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

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

【讨论】：

这是一个比使用附加类更好的解决方案，+1。

好答案 - jQuery 的 .css('style-name', 'style-value') 函数将内联样式添加到元素中 - 对于动态更新样式至关重要。拖放脚本可能会更改绝对定位元素的 top 和 left 样式 - 在这种情况下使用类是不切实际的。

它比其他选项更好，因为我们只需要删除样式。

就像补充一点，chrome 无法正确处理这个问题，正如 here 所见，更安全的选择是使用 `attr('style', '')。

很好的答案。只要你确定only有你想要在执行后删除的内联CSS（动画通常就是这种情况），那么这就是去吧。

【参考方案3】：

将您的 CSS 属性放入一个类中，然后执行以下操作：

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

然后你的“其他功能”在哪里做类似的事情：

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

【讨论】：

@Aruna：我现在有点害怕 - 你是如何 将样式放在元素上的？如果您的 CSS 不在样式表/块中，则它不是 CSS。

@annakata：当然是……<div style="xxx"/> 仍然是 CSS……这不是一个很好的方法，但它确实有效。

这个答案并不能帮助您即时修改某些内容以进行动画或复杂渲染。问题不在于如何组织 CSS，而是如何移除 CSS 选项。

@FMaz008 - 动画和复杂的渲染远远超出了他的要求。阅读问题：“......毕竟我想从 Div 中删除应用的 Css”。所以他可以使用@ToRrEs 的回答中的addClass 或removeClass 或removeAttr('style')。

虽然下面对我也有用，但我觉得这是最好的解决方案，因为我更喜欢在我的样式表中进行所有样式设置或至少尽可能多的设置。我最终以这种方式做事。

【参考方案4】：

您可以通过这种方式删除内联属性：

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

例如：

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

这在上面基本上已经提到过，它确实可以解决问题。

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

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

【讨论】：

只是我正在寻找的东西，删除了内联样式..谢谢

【参考方案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(";"));
        );
    
);

【讨论】：

有没有办法可以删除所有的css属性？

我试过第一个，效果很好！对于所有可能不知道的新手：css('attr','') 与删除该 attr 不同！

【参考方案6】：

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

【参考方案7】：

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

希望对你有帮助

【参考方案8】：

设置默认值，例如：

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

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

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

【参考方案9】：

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

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

【参考方案10】：

如果你不想使用类（你真的应该这样做），实现你想要的唯一方法是首先保存更改的样式：

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

// set style
// do your thing

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

【参考方案11】：

我使用了user147767的第二种方案

但是，这里有一个错字。应该是

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

不

我也将此条件更改为：

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

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

【参考方案12】：

在添加一个类之前，你应该检查它是否已经有带有 .hasClass() 方法的类

针对您的具体问题。你应该把你的东西放在级联样式表中。最好将设计和功能分开。

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

但是，当您操作元素时，您无法控制它们的呈现方式。 removeAttr('style') 是删除所有内联样式的最佳方法。

【参考方案13】：

我稍微修改了 user147767 的 solution 以便可以使用 strings、arrays 和 objects 作为输入：

/*!
 * jquery.removecss.js v0.2 - https://***.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/