jQuery插件正在应用内联样式(display:block)。我感觉很懒,想用display:none重写它。
最好的(懒惰的)方法是什么?
jQuery插件正在应用内联样式(display:block)。我感觉很懒,想用display:none重写它。
最好的(懒惰的)方法是什么?
.removeAttr("style")来去掉整个style标签…
.attr("style")来测试值,看看是否存在内联样式…
.attr("style",newValue)将其设置为其他值
懒惰的方式(这将导致未来的设计师诅咒你的名字,并在你睡觉时谋杀你):
#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="">
如果你想在一个样式属性中删除一个属性——而不仅仅是将它设置为其他属性——你可以使用removeProperty()方法:
document.getElementById('element').style.removeProperty('display');
更新: 我做了一个交互式的小提琴来玩不同的方法和他们的结果。显然,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>