使用JQuery从Div中删除CSS
我是JQuery的新手。 在我的应用程序中，我有以下几点：
$("#displayPanel div").live("click", function(){ $(this).css({'background-color' : 'pink', 'font-weight' : 'bolder'}); }); 当我点击Div时，Div的颜色会改变。 在这个Clickfunction中，我有一些function可以做。 毕竟，我想从部门中删除应用的Css。 我怎么能在JQuery中做到这一点？
把你的CSS属性放到一个类中，然后做这样的事情：
$("#displayPanel div").live("click", function(){ $(this).addClass('someClass'); });
那么你的“其他function”就是这样做的：
$("#myButton").click(function(){ $("#displayPanel div").removeClass('someClass'); });
你可以像这样删除元素上的特定的CSS：
$(this).css({'background-color' : '', 'font-weight' : ''});
虽然我同意karim你应该使用CSS类。
如果要删除使用javascript手动添加的所有内联样式，则可以使用removeAttr方法。 最好使用CSS类，但你永远不知道。
$("#displayPanel div").removeAttr("style")
你可以这样删除内联属性：
$(selector).css({'property':'', 'property':''});
例如：
$(actpar).css({'top':'', 'opacity':''});
这基本上是上面提到的，它绝对是诀窍。
顺便说一句，这在诸如需要在animation之后清除状态的实例中是有用的。 当然，我可以写六个类来处理这个问题，或者我可以使用我的基类和#id做一些math运算，并清除animation应用的内联样式。
$(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”）;
或者在其他CSSfunction的情况下
$（this）.css（“height”，“inherit”）;
我也有相同的概率，只是删除值
<script> $("#play").toggle(function(){$(this).css("background","url(player.png) -100px 0px no-repeat");}, function(){$(this).css("background","");}); </script>
其实，当我不得不做复杂的基于jquery的样式时，我发现这样做的最好方法，例如，如果您需要显示一个模式，但需要计算页面偏移量以获取正确的参数一个jQuery（“x”）.css（{}）函数。
所以这里是样式的设置，根据各种因素计算出的variables的输出。
$(".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”属性中的元素，就像是在内联编写样式一样。 您只需清除该属性，并将该项目重置为其原始样式
希望这可以帮助
如果你不想使用类（你真的应该这样做），那么完成你想要的东西的唯一方法就是先保存改变的样式：
var oldFontSize = $(this).css("font-size"); var oldBackgroundColor = $(this).css("background-color"); // set style // do your thing $(this).css("font-size",oldFontSize); // etc...
我使用了user147767的第二个解决scheme
但是，这里有一个错字。 它应该是
curCssName.toUpperCase（）。indexOf（cssName.toUpperCase（）+'：'）<0
不是<= 0
我也改变了这个条件：
！curCssName.match（new RegExp（cssName +“（ – 。+）?:”），“mi”）
因为有时我们通过jQuery添加一个css属性，并且以不同的浏览器以不同的方式添加它（即，边界属性将被添加为Firefox的“边框”，IE的“border-top”，“border-bottom”等） ）。
在添加一个类之前，你应该检查它是否已经有了.hasClass（）方法的类
为您的具体问题。 你应该把你的东西在层叠样式表中。 分离devise和function是最好的实践。
所以build议的添加和删除类名称的解决scheme是最佳实践。
但是当你操纵元素时，你不能控制它们的渲染方式。 removeAttr（'style'）是删除所有内联样式的最好方法。
我稍微修改了user147767的解决scheme ，以便使用strings ， arrays和objects作为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' });
