一个jQuery插件正在应用内联样式(display:block
)。我感觉很懒,想用display:none
覆盖它。
什么是最好的(懒惰)方式?
更新:虽然以下解决方案有效,但有一种更简单的方法。见下文。
这就是我想出来的,我希望这对你或其他任何人都有用:
$('#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', '');
它将自动为您删除。
以下是the docs的引用:
将style属性的值设置为空字符串 - 例如
$('#mydiv').css('color', '')
- 如果已经直接应用了元素,则从元素中删除该属性,无论是在HTML样式属性中,通过jQuery的.css()
方法,还是通过样式属性的直接DOM操作。但是,它不会删除样式表或<style>
元素中使用CSS规则应用的样式。
我不认为jQuery在这里有任何魔力; it seems the style
object does this natively。
如果显示是您样式中唯一的参数,则可以运行此命令以删除所有样式:
removeProperty()
意味着如果您的元素之前看起来像这样:
$('#element').attr('style','');
现在您的元素将如下所示:
<input id="element" style="display: block;">
这是一个插入jQuery的<input id="element" style="">
。
inlineStyle selector filter I wrote
在你的情况下你可以使用这样:
$("div:inlineStyle(display:block)") // will select all divs with an inline style of display: block set
将插件更改为不再应用样式。这比删除之后的风格要好得多。
$("div:inlineStyle(display:block)").hide();
等等...
把第二个参数留空!
$el.css({
height : '',
'margin-top' : ''
});
起初我尝试在css中删除内联样式,但它不起作用,并且将覆盖像display:none这样的新样式。但是在JQuery中它的工作原理就是这样。
.removeAttr("style")
只是摆脱整个风格标签......
.attr("style")
测试值并查看是否存在内联样式...
.attr("style",newValue)
把它设置成别的东西
删除内联样式(由jQuery生成)的最简单方法是:
$(this).attr("style", "");
内联代码应该消失,您的对象应该适应CSS文件中预定义的样式。
为我工作!
您可以使用jQuery qazxsw poo方法设置样式:
css
你可以像这样创建一个jquery插件:
$('something:visible').css('display', 'none');
用法
jQuery.fn.removeInlineCss = (function(){
var rootStyle = document.documentElement.style;
var remover =
rootStyle.removeProperty // modern browser
|| rootStyle.removeAttribute // old browser (ie 6-8)
return function removeInlineCss(properties){
if(properties == null)
return this.removeAttr('style');
proporties = properties.split(/\s+/);
return this.each(function(){
for(var i = 0 ; i < proporties.length ; i++)
remover.call(this.style, proporties[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
免责声明:我不提倡这种方法,但它肯定是懒惰的方式。
#myelement
{
display: none !important;
}
$('div[style*=block]').removeAttr('style');
如果要删除样式属性中的属性 - 而不仅仅是将其设置为其他属性 - 则可以使用$("[style*=block]").hide();
方法:
removeProperty()
更新:
我已经制作了一个互动的document.getElementById('element').style.removeProperty('display');
来玩弄不同的方法和结果。显然,fiddle,set to empty string
和set to faux value
之间并没有太大区别。它们都会产生相同的后备 - 这是预先给定的CSS规则或浏览器的默认值。