是否可以使用jQuery删除内联样式? [英] Is it possible to remove inline styles with jQuery?

问题描述

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

A jQuery plugin is applying an inline style (display:block). I'm feeling lazy and want to override it with display:none.

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

What's the best (lazy) way?

推荐答案

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

Update: while the following solution works, there's a much easier method. See below.

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

Here's what I came up with, and I hope this comes in handy - to you or anybody else:

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

这将删除该内联样式.

我不确定这是否是您想要的.您想要覆盖它，正如已经指出的那样，可以通过$('#element').css('display', 'inline')轻松完成.

I'm not sure this is what you wanted. You wanted to override it, which, as pointed out already, is easily done by $('#element').css('display', 'inline').

我正在寻找的是一种完全删除嵌入式样式的解决方案. 我正在编写的插件需要这个，我必须在其中临时设置一些内联CSS值，但以后要删除它们；我希望样式表重新获得控制权. 我可以通过存储所有原始值，然后再将它们放回行中来做到这一点，但是这种解决方案对我来说感觉更干净了.

What I was looking for was a solution to REMOVE the inline style completely. I need this for a plugin I'm writing where I have to temporarily set some inline CSS values, but want to later remove them; I want the stylesheet to take back control. I could do it by storing all of its original values and then putting them back inline, but this solution feels much cleaner to me.

此处为插件格式:

(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));

如果您在脚本之前的页面中包含此插件，则可以直接致电

If you include this plugin in the page before your script, you can then just call

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

这应该可以解决问题.

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

Update: I now realized that all this is futile. You can simply set it to blank:

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

，它将自动为您删除.

以下是文档的引言:

Here's a quote from the docs:

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

Setting the value of a style property to an empty string — e.g. $('#mydiv').css('color', '') — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or <style> element.

我不认为jQuery在这里发挥了任何作用； 似乎style对象是本机执行的.

I don't think jQuery is doing any magic here; it seems the style object does this natively.

这篇关于是否可以使用jQuery删除内联样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！