使用 JQuery 从 Div 中删除 CSS

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

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

当我单击一个 Div 时，该 Div 的颜色会发生变化。在 Click 函数中，我有一些功能要做。毕竟，我想从 Div 中删除应用的 CSS。我如何在 JQuery 中做到这一点？

443939 次浏览
小开
最佳答案

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

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

然后在你的“其他功能”所在的地方做一些类似的事情:

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

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

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

小开

你可以像下面这样删除元素上特定的 css:

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

尽管我同意 karim 的观点，你应该使用 CSS 类。

小开

如果你不想使用类(你真的应该这么做) ，那么唯一的方法就是先保存不断变化的样式:

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


// set style
// do your thing


$(this).css("font-size",oldFontSize);
// etc...
小开 
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(";"));
});
}
});
小开

您可以这样删除内联属性:

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

例如:

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

这基本上是上面提到的，它确实起到了作用。

顺便说一句，这在实例中非常有用，例如当您需要在动画之后清除状态时。当然，我可以编写六个类来处理这个问题，或者我可以使用我的基类和 # id 做一些数学计算，并清除动画应用的内联样式。

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

注意，根据属性的不同，您可以将其设置为 auto。

小开

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

为了你的具体问题。您应该将您的东西放在级联样式表中。将设计和功能分开是最佳实践。

因此，提出的添加和删除类名的解决方案是最佳实践。

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

小开

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

但是，这里有一个打印错误。它应该是

ToUpperCase () . indexOf (cssName.toUpperCase ()) +’:’) < 0

不少于0

我还改变了这个条件:

! curCssName.match (new RegExp (cssName + (- . +) ? : “) ，“ mi”)

有时我们会在 jQuery 上添加一个 css 属性，而且它是以不同的方式为不同的浏览器添加的(例如，边框属性将被添加为 Firefox 的“ orders”，以及 IE 的“ orders-top”、“ orders-bottom”等)。

小开

设置默认值，例如:

$(this) . css (“ height”，“ auto”) ;

或者在其他 CSS 特性的情况下

$(this) . css (“身高”，“继承”) ;

小开

我也有同样的问题, 只要去掉它的价值

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

我稍微修改了 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/

小开

实际上，我发现的最好的方法是当需要进行复杂的基于 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”属性中的元素中，就好像您在内联地写样式一样。您所需要做的就是清除该属性，并且该项应该重置为其原始样式

希望这个能帮上忙


提交答案