我是 JQuery 的新手。在我的应用程序中，我有以下内容：
$("#displayPanel div").live("click", function(){
$(this).css({'background-color' : 'pink', 'font-weight' : 'bolder'});
});
当我点击一个 Div 时，该 Div 的颜色会改变。在那个 Click 函数中，我有一些功能要做。毕竟我想从 Div 中删除应用的 Css。我怎么能在 JQuery 中做到这一点？
【问题讨论】：
您可以像这样删除元素上的特定 css：
$(this).css({'background-color' : '', 'font-weight' : ''});
虽然我同意 karim 的观点，您可能应该使用 CSS 类。
【讨论】：
如果您想删除所有使用 javascript 手动添加的内联样式，您可以使用 removeAttr 方法。最好使用 CSS 类，但你永远不知道。
$("#displayPanel div").removeAttr("style")
【讨论】：
.css('style-name', 'style-value') 函数将内联样式添加到元素中 - 对于动态更新样式至关重要。拖放脚本可能会更改绝对定位元素的 top 和 left 样式 - 在这种情况下使用类是不切实际的。
将您的 CSS 属性放入一个类中，然后执行以下操作：
$("#displayPanel div").live("click", function(){
$(this).addClass('someClass');
});
然后你的“其他功能”在哪里做类似的事情：
$("#myButton").click(function(){
$("#displayPanel div").removeClass('someClass');
});
【讨论】：
<div style="xxx"/> 仍然是 CSS……这不是一个很好的方法，但它确实有效。
addClass 或removeClass 或removeAttr('style')。
您可以通过这种方式删除内联属性：
$(selector).css({'property':'', 'property':''});
例如：
$(actpar).css({'top':'', 'opacity':''});
这在上面基本上已经提到过，它确实可以解决问题。
顺便说一句，这在您需要在动画后清除状态等情况下很有用。当然我可以编写六个类来处理这个问题，或者我可以使用我的基类和#id 做一些数学运算，并清除动画应用的内联样式。
$(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(";"));
});
}
});
【讨论】：
请注意，根据属性，您可以将其设置为自动。
【讨论】：
实际上，当必须执行基于 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”属性中的元素，就像您正在编写内联样式一样。您所要做的就是清除该属性，并且该项目应重置为其原始样式
希望对你有帮助
【讨论】：
设置默认值，例如：
$(this).css("height", "auto");
或者在其他 CSS 功能的情况下
$(this).css("height", "inherit");
【讨论】：
我也有同样的问题， 只需删除值
<script>
$("#play").toggle(function(){$(this).css("background","url(player.png) -100px 0px no-repeat");},
function(){$(this).css("background","");});
</script>
【讨论】：
如果你不想使用类（你真的应该这样做），实现你想要的唯一方法是首先保存更改的样式：
var oldFontSize = $(this).css("font-size");
var oldBackgroundColor = $(this).css("background-color");
// set style
// do your thing
$(this).css("font-size",oldFontSize);
// etc...
【讨论】：
我使用了user147767的第二种方案
但是，这里有一个错字。应该是
curCssName.toUpperCase().indexOf(cssName.toUpperCase() + ':')
不
我也将此条件更改为：
!curCssName.match(new RegExp(cssName + "(-.+)?:"), "mi")
因为有时我们在 jQuery 上添加一个 css 属性，并且它在不同的浏览器中以不同的方式添加（即边框属性将添加为 Firefox 的“border”，以及“border-top”、“border-bottom” IE等）。
【讨论】：
在添加一个类之前，你应该检查它是否已经有带有 .hasClass() 方法的类
针对您的具体问题。你应该把你的东西放在级联样式表中。最好将设计和功能分开。
所以建议的添加和删除类名的解决方案是最佳实践。
但是，当您操作元素时，您无法控制它们的呈现方式。 removeAttr('style') 是删除所有内联样式的最佳方法。
【讨论】：
我稍微修改了 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'
});
【讨论】：