有可能用jQuery删除内联样式吗?

小开

.removeAttr("style")来去掉整个样式标签…

.attr("style")来测试该值并查看是否存在内联样式…

.attr("style",newValue)来设置它为其他东西

小开

$("[style*=block]").hide();

小开

$('div[style*=block]').removeAttr('style');

小开

你可以使用jQuery的css方法设置样式:

$('something:visible').css('display', 'none');

小开

懒惰的方式(这将导致未来的设计师诅咒你的名字，并在你睡觉时谋杀你):

#myelement
{
display: none !important;
}

免责声明:我不提倡这种方法，但它肯定是懒惰的方式。

小开

将插件更改为不再应用该样式。这比随后删除样式要好得多。

小开

最佳答案

更新:虽然下面的解决方案是可行的，但还有一个更简单的方法。见下文。

这是我想到的，我希望这对你或其他人有用:

$('#element').attr('style', function(i, style)
{
return style && style.replace(/display[^;]+;?/g, '');
});

这将删除内联样式。

我不确定这是你想要的。你想要重写它，正如已经指出的，这可以通过$('#element').css('display', 'inline')轻松完成。

我正在寻找的是一个解决方案，以删除内联风格完全。我需要这个插件，我正在写的地方，我必须临时设置一些内联CSS值，但后来想删除它们;我想让样式表收回控制权。我可以通过存储所有的原始值，然后将它们放回内联来做到这一点，但这个解决方案对我来说感觉更干净

下面是它的插件格式:

(function($)
{
$.fn.removeStyle = function(style)
{
var search = new RegExp(style + '[^;]+;?', 'g');


return this.each(function()
{
$(this).attr('style', function(i, style)
{
return style && style.replace(search, '');
});
});
};
}(jQuery));

如果你在脚本之前将这个插件包含在页面中，你就可以直接调用它

$('#element').removeStyle('display');

这样就可以了。

更新:我现在意识到这一切都是徒劳的。您可以简单地将其设置为空白:

$('#element').css('display', '');

它会自动为你删除。

下面是来自的文档的一段话:

将样式属性的值设置为空字符串——例如$('#mydiv').css('color', '')——如果元素已经直接应用了该属性，则从元素中删除该属性，无论是在HTML样式属性中，还是通过jQuery的.css()方法，或者通过直接的DOM操作样式属性。但是，它不会删除样式表或<style>元素中已应用了CSS规则的样式。

我不认为jQuery在这里有任何魔力;似乎style对象本身就是这样做的。

小开

下面是一个插入jQuery的我写的inlineStyle选择器过滤器。

$("div:inlineStyle(display:block)") // will select all divs with an inline style of display: block set

在你的例子中，你可以这样使用:

$("div:inlineStyle(display:block)").hide();

小开

删除内联样式(由jQuery生成)最简单的方法是:

$(this).attr("style", "");

内联代码应该消失，对象应该适应CSS文件中预定义的样式。

为我工作!

小开

你可以像这样创建一个jquery插件:

jQuery.fn.removeInlineCss = function (properties) {
if (properties == null) return this.removeAttr('style')
properties = properties.split(/\s+/)
return this.each(function () {
for (var i = 0; i < properties.length; i++)
this.style.removeProperty(properties[i])
})
}

使用

$(".foo").removeInlineCss(); //remove all inline styles
$(".foo").removeInlineCss("display"); //remove one inline style
$(".foo").removeInlineCss("color font-size font-weight"); //remove several inline styles

小开

如果显示是你的样式中唯一的参数，你可以运行这个命令来删除所有的样式:

$('#element').attr('style','');

这意味着如果你的元素之前是这样的:

<input id="element" style="display: block;">

现在你的元素看起来是这样的:

<input id="element" style="">

小开

< p > <代码> el.css美元({ 高度:"， 'margin-top': " }); < /代码> < / p >

等等……

只需要保留第二个参数为空!

小开

如果你想要删除一个样式属性中的属性——而不仅仅是将它设置为其他属性——你可以使用removeProperty()方法:

document.getElementById('element').style.removeProperty('display');

< p > 更新: < br > 我已经做了一个交互式小提琴来处理不同的方法及其结果。显然，set to empty string， set to faux value和removeProperty()之间没有太大的区别。它们都会导致相同的回退——要么是预先给定的CSS规则，要么是浏览器的默认值

小开

$("#element").css({ display: "none" });

起初，我试图删除css中的内联样式，但它不起作用，新样式如display: none将被覆盖。但在JQuery中，它是这样工作的。

小开

我有类似的问题与宽度属性。我不能从代码中删除!important，因为它在一个新模板上需要这种样式，我添加了一个Id (modalstyles)到元素中，然后我添加了以下代码到模板中:

<script type="text/javascript">
$('#modalstyling').css('width', '');    //Removal of width !important
$('#modalstyling').width('75%');        //Set custom width
</script>