是否可以使用jQuery删除内联样式？

Question

一个jQuery插件正在应用内联样式(display:block).我感觉很懒,想要用它来覆盖它display:none.

什么是最好的(懒惰)方式？

Answer 1

更新:虽然以下解决方案有效,但有一种更简单的方法.见下文.

这就是我想出来的,我希望这对你或其他任何人都有用:

$('#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对象本身就是这样做的.

Answer 2

.removeAttr("style") 只是摆脱整个风格标签......

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

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

Answer 3

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

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

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

为我工作!

Answer 4

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

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

Answer 5

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

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

Answer 6

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

#myelement 
{
    display: none !important;
}

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

Answer 7

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

Answer 8

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

Answer 9

如果要删除样式属性中的属性 - 而不仅仅是将其设置为其他属性 - 则可以使用以下removeProperty()方法:

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

更新:
我已经做了一个互动的小提琴来玩弄不同的方法和结果.显然set to empty string,set to faux value和之间没有太大的区别removeProperty().它们都会产生相同的后备 - 这是预先给定的CSS规则或浏览器的默认值.

Answer 10

如果显示是您样式中唯一的参数,则可以运行此命令以删除所有样式:

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

意味着如果您的元素之前看起来像这样:

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

现在您的元素将如下所示:

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