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

是否可以使用jQuery删除内联样式?,jquery,Jquery,jQuery插件正在应用内联样式(display:block)。我感觉很懒,想用display:none覆盖它 最好的(懒惰的)方法是什么?.removeAttr(“风格”)只需去掉整个风格标签 .attr(“style”)测试该值并查看是否存在内联样式 .attr(“style”,newValue)要将其设置为其他内容可以使用jQuery的方法设置样式: $("[style*=block]").hide(); 懒惰的方式(这将导致未来的设计师诅咒你的名字,并在睡梦中谋杀你): 免责声明:我不

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

最好的(懒惰的)方法是什么?

.removeAttr(“风格”)
只需去掉整个风格标签

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


.attr(“style”,newValue)
要将其设置为其他内容

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

$("[style*=block]").hide();
懒惰的方式(这将导致未来的设计师诅咒你的名字,并在睡梦中谋杀你):


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

更改插件,使其不再应用该样式。这比在之后删除样式要好得多。

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


以下是我的想法,我希望这能派上用场——对你或其他人来说:

$('#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', '');
它将自动为您删除

以下是一段引自:

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

我认为jQuery在这里没有任何魔力

下面是一个插入jQuery的

$("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(){
    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]);
        });
    };
})();

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

$('#element').attr('style','');
意味着如果您的元素以前看起来像这样:

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

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

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

$el.css({
高度:'',
“页边空白处”:“
});

等等

只需将第二个参数留空

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


更新:
我已经做了一个互动游戏,用不同的方法和它们的结果来玩。显然,
设置为空字符串
设置为假值
removeProperty()
之间没有太大区别。它们都会导致相同的回退–这是预先给定的CSS规则或浏览器的默认值。

$(“#元素”).CSS({display:“none”})


起初,我试图删除css中的内联样式,但它不起作用,而且像display这样的新样式:不会覆盖任何样式。但在JQuery中,它是这样工作的

我对宽度属性也有类似的问题。我拿不下那根绳子!代码中的重要信息,因为它需要在新模板上使用这种样式,所以我在元素中添加了一个Id(modalstyling),然后我在模板中添加了以下代码:

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

$('modalstyling').css('width','')//删除宽度!重要的
$('modalstyling')。宽度('75%)//设置自定义宽度

在以下方面寻求帮助:)最好的方法和懒惰的方法不一定相同。我经常听到这样的说法:最好的开发人员懒惰。。。这将影响所有内联样式,而不仅仅是
显示
。听起来不错,我会尝试一下,让你知道,我从来没有正常使用内联样式,所以很高兴清除所有内联样式styles@Slaks嗯,这就是我所说的“摆脱整个风格标签”;)你好有没有一种方法可以检查某个“风格”是否适用于$(“*”),来自任何源,如内联样式、类似于字体的样式、b、strong、css文件。。在尝试删除/重置任何内容或只是简单地一次性重置所有内容之前?因为单独删除每个内联样式并不会删除(现在为空的)
style
属性,这仍然值得注意。@Kobi:他问的是任何内联样式。呃,什么?我可能不明白什么。我在考虑
$('div')。hide()
@Kobi:
hide
解决了修改内联样式的一种特殊情况。这个答案适用于所有情况。(
hide/show
也有两个限制,即两个值可以切换。即无->块或无->内联。)@Joel:
hide
/
show
将记住
display
的旧值并正确还原。@SLaks:Cool。这肯定是最近才加的,因为我记得以前在这方面遇到过麻烦。因此“懒惰”!不能被纵火去发现它是哪个插件的哪一位!我不知道你怎么定义懒惰,我只是回答了我会怎么做。与修补相比,解决问题的根源似乎更有意义
$('#element').attr('style','');
<input id="element" style="display: block;">
<input id="element" style="">
document.getElementById('element').style.removeProperty('display');
<script type="text/javascript">
    $('#modalstyling').css('width', '');    //Removal of width !important
    $('#modalstyling').width('75%');        //Set custom width
</script>