使用 JQuery 从 Div 中删除 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/955030/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove CSS from a Div using JQuery
提问by useranon
I'm new to JQuery. In my App I have the following:
我是 JQuery 的新手。在我的应用程序中，我有以下内容：
$("#displayPanel div").live("click", function(){
$(this).css({'background-color' : 'pink', 'font-weight' : 'bolder'});
});
When I click on a Div, the color of that Div is changed. Within that Click function I have some functionalities to do. After all that I want to remove the applied Css from the Div. How could I do it in JQuery?
当我单击一个 Div 时，该 Div 的颜色会改变。在那个 Click 函数中，我有一些功能要做。毕竟，我想从 Div 中删除应用的 Css。我怎么能在 JQuery 中做到这一点？
采纳答案by karim79
Put your CSS properties into a class, then do something like this:
将您的 CSS 属性放入一个类中，然后执行以下操作：
$("#displayPanel div").live("click", function(){
$(this).addClass('someClass');
});
Then where your 'other functionalities' are do something like:
然后你的“其他功能”在哪里做这样的事情：
$("#myButton").click(function(){
$("#displayPanel div").removeClass('someClass');
});
回答by thatismatt
You can remove specific css that is on the element like this:
您可以像这样删除元素上的特定 css：
$(this).css({'background-color' : '', 'font-weight' : ''});
Although I agree with karim that you should probably be using CSS classes.
尽管我同意 karim 的观点，您可能应该使用 CSS 类。
回答by jeroen.verhoest
You could use the removeAttr method, if you want to delete all the inline style you added manually with javascript. It's better to use CSS classes but you never know.
如果您想删除所有使用 javascript 手动添加的内联样式，您可以使用 removeAttr 方法。最好使用 CSS 类，但您永远不知道。
$("#displayPanel div").removeAttr("style")
$("#displayPanel div").removeAttr("style")
回答by Chad
You can remove inline properties this way:
您可以通过以下方式删除内联属性：
$(selector).css({'property':'', 'property':''});
For example:
例如：
$(actpar).css({'top':'', 'opacity':''});
This is essentially mentioned above, and it definitely does the trick.
这基本上是上面提到的，它绝对可以解决问题。
BTW, this is useful in instances such as when you need to clear a state after animation. Sure I could write a half dozen classes to deal with this, or I could use my base class and #id do some math, and clear the inline style that the animation applies.
顺便说一句，这在您需要在动画后清除状态等情况下很有用。当然，我可以编写六个类来处理这个问题，或者我可以使用我的基类和 #id 做一些数学运算，并清除动画应用的内联样式。
$(actpar).animate({top:0, opacity:1, duration:500}, function() {
$(this).css({'top':'', 'opacity':''});
});
回答by Chad
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(";"));
});
}
});
回答by Jeff Davis
As a note, depending upon the property you may be able to set it to auto.
请注意，根据属性，您可以将其设置为自动。
回答by somid3
Set the default value, for example:
设置默认值，例如：
$(this).css("height", "auto");
$(this).css("height", "auto");
or in the case of other CSS features
或者在其他 CSS 功能的情况下
$(this).css("height", "inherit");
$(this).css("height", "inherit");
回答by user3198542
Actually the best way I have found to do this when having to do complex jquery based styling, for Example, if you have a modal that you need to display but it needs to calculate page offsets to get the correct parameters those will need to go into the a jQuery("x").css({}) function.
实际上，当必须执行基于 jquery 的复杂样式时，我发现这样做的最佳方法，例如，如果您有一个需要显示的模式，但它需要计算页面偏移量以获得正确的参数，这些参数将需要进入一个 jQuery("x").css({}) 函数。
So here is the setting of the styles, the output of variables that have computed based on various factors.
所以这里是样式的设置，基于各种因素计算的变量的输出。
$(".modal").css({ border: "1px solid #ccc", padding: "3rem", position: "absolute", zIndex: 999, background: "#fff", top: "30", visibility: "visible"})
In order to clear those styles. rather than setting something like
为了清除那些样式。而不是设置类似的东西
$(".modal").css({ border: "", padding: "", position: "", zIndex: 0, background: "", top: "", visibility: ""})
The simple way would be
简单的方法是
$(".modal").attr("style", "")
When jquery manipulates elements on the dom, the styles are written to the element in the "style" attribute as if you were writing the styles inline. All you have to do is to clear that attribute and the item should reset to its original styles
当 jquery 操作 dom 上的元素时，样式将写入“style”属性中的元素，就像您在编写内联样式一样。您所要做的就是清除该属性，该项目应重置为其原始样式
Hope this helps
希望这可以帮助
回答by Fauzan Rofiq
i have same prob too, just remove the value
我也有同样的问题，只需删除该值
<script>
$("#play").toggle(function(){$(this).css("background","url(player.png) -100px 0px no-repeat");},
function(){$(this).css("background","");});
</script>
回答by whiterabbit
I used the second solution of user147767
我使用了user147767的第二种解决方案
However, there is a typo here. It should be
但是，这里有一个错字。它应该是
curCssName.toUpperCase().indexOf(cssName.toUpperCase() + ':') < 0
curCssName.toUpperCase().indexOf(cssName.toUpperCase() + ':') < 0
not <= 0
不 <= 0
I also changed this condition for:
我也改变了这个条件：
!curCssName.match(new RegExp(cssName + "(-.+)?:"), "mi")
!curCssName.match(new RegExp(cssName + "(-.+)?:"), "mi")
as sometimes we add a css property over jQuery, and it's added in a different way for different browsers (i.e. the border property will be added as "border" for Firefox, and "border-top", "border-bottom" etc for IE).
因为有时我们会在 jQuery 上添加一个 css 属性，并且它会以不同的方式添加到不同的浏览器中（即，对于 Firefox，边框属性将添加为“边框”，对于 IE，将添加为“边框顶部”、“边框底部”等）。
