如何使用JavaScript删除CSS属性？

195

是否可以使用JavaScript删除元素的CSS属性？例如我有div.style.zoom = 1.2，现在我想通过JavaScript删除zoom属性吗？

javascript css

— 坐着
source

3

请说明：您是要从某个元素中删除类还是从某些元素中删除属性？

— JanHančič10年

1

抱歉，不是元素的class属性。

— 坐在

为什么要投票？这是一个足够体面的问题，不是吗？

— 罗兰·鲍曼

2

嗨，坐着，我不明白-为什么您将naivists的答复标记为“已接受的答复”？我的意思是，如果您想按类查找元素，那么他的解决方案很好，但是问题中的所有内容都表明您正在寻找一种方法来更改设置局部样式属性的效果。当然，我的答案更适合这个问题了吗？也许我误解了你的问题？

— 罗兰·鲍曼

1

实际上，@ RolandBouman应该将接受的答案更改为EdvinasIlčenko的答案，因为它可以解决有关删除的要求，而不是更改为默认值。您的答案仍然有价值，因此我已对其进行编辑以阐明区别。

— whitneyland '17

187

您有两种选择：

选项1：

您可以使用removeProperty方法。它将从元素中删除样式。

el.style.removeProperty('zoom');

选项2：

您可以将其设置为默认值：

el.style.zoom = "";

现在，有效缩放将随样式表中的定义（通过链接和样式标签）而变化。因此，此语法只会修改此元素的局部样式。

— 罗兰·鲍曼
source

…以及用户CSS和浏览器的默认样式。

— 昆汀2010年

我理解OP的意思是他们想要使其像未设置元素的style属性一样，这正是您所提供的。我尝试使用el.style.removeProperty（'zoom'）; （实际上，以我为例，“填充”）在IE中似乎做同样的事情，并被其他浏览器忽略。出于某种原因，我惊讶地发现将其设置为空字符串具有相同的效果，并且似乎可以在所有（最新版本的）浏览器上使用。

— 沙威

在标准的任何地方都指定了此行为吗？我找不到它：-(

— 奥利弗·约瑟夫·阿什

@OliverJosephAsh是的，已记录在案，请在下面的stackoverflow.com/a/7901886/700206上

— whitneyland

120

removeProperty将从元素中删除样式。

例：

div.style.removeProperty（'zoom'）;

MDN文档页面：
CSSStyleDeclaration.removeProperty

— 埃德维纳斯·伊尔琴科（EdvinasIlčenko）
source

25

div.style.removeProperty('zoom');

— 乔
source

10

您可以使用styleSheets对象：

document.styleSheets[0].cssRules[0].style.removeProperty("zoom");

警告＃1：您必须知道样式表的索引和规则的索引。

注意事项2：浏览器会不一致地实现此对象；在一个中起作用的可能在另一个中不起作用。

— 詹姆斯·加里斯
source

这似乎很脆弱。每当索引改变时，它不会中断吗？

— Casey Rodarmor 2012年

是的这正是警告＃1所说的。

— james.garriss 2012年

我的Chrome 26没有CSSStyleRule.prototype.removeProperty=（实际上CSSStyleRule没有任何方法。=（

— Rudie 2013年

CSSStyleSheet.prototype.removeRule进行营救。

— Rudie 2013年

@Rudie，不是CSSStyleSheet.prototype.deleteRule吗？

— roka 2014年

7

element.style.height = null;

输出：

<div style="height:100px;"> 
// results: 
<div style="">

— 托杜亚
source

似乎将样式设置为null在IE11中不起作用。

— MaximeW

1

为什么有人应该照顾IE浏览器？我有意无视它们已经很多年了。

— T.Todua

4

您可以尝试查找所有具有此类的元素，并将“ zoom”属性设置为“ nothing”。

如果您使用的是jQuery javascript库，则可以使用 $(".the_required_class").css("zoom","")

编辑：删除了该语句，因为事实证明它不正确，正如评论和其他答案中指出的那样，自2010年以来它确实是可能的。

错误：没有从JavaScript修改样式表的普遍已知方法。

— 纳维主义者
source

5

就在这里。尽管javascript并不难，但可以通过编程方式修改样式表。它可以跨浏览器运行，并具有出色的性能，并且在更改一个在一系列元素上应该相同的属性时确实有意义。与2010年1月一样。这是一个简单的示例：stackoverflow.com/questions/14927706/…–

— Clox

Clox：添加样式表以编程方式覆盖某些属性-当然！修改已加载的-尚未听说。

— naivists 2013年

它是要css（）而不是attr（）。抑或是IE中的attr（）？

— Alex KeySmith 2014年

实际上应该是css，不是attr，您是对的。

— naivists

1

您也可以在jQuery中这样说 $(selector).css("zoom", "")

— 尝试改善
source

0

这应该可以解决问题-将内联样式设置为普通以进行缩放：

$（'div'）。attr（“ style”，“ zoom：normal;”）;

— 马特
source

1

问题是如何删除样式，此答案将销毁所有现有样式，并用一个新条目替换它们。

— whitneyland '17

0

实际上，如果您已经知道该物业，那就可以了...

例如：

<a href="test.html" style="color:white;zoom:1.2" id="MyLink"></a>

    var txt = "";
    txt = getStyle(InterTabLink);
    setStyle(InterTabLink, txt.replace("zoom\:1\.2\;","");

    function setStyle(element, styleText){
        if(element.style.setAttribute)
            element.style.setAttribute("cssText", styleText );
        else
            element.setAttribute("style", styleText );
    }

    /* getStyle function */
    function getStyle(element){
        var styleText = element.getAttribute('style');
        if(styleText == null)
            return "";
        if (typeof styleText == 'string') // !IE
            return styleText;
        else  // IE
            return styleText.cssText;
    }

请注意，这仅适用于内联样式...不适用于通过类或类似内容指定的样式...

其他说明：您可能必须在该replace语句中转义一些字符，但是您明白了。

— MaxOvrdrv
source

-3

更改元素的所有类：

document.getElementById("ElementID").className = "CssClass";

要将附加类添加到元素：

document.getElementById("ElementID").className += " CssClass";

要检查类是否已应用于元素：

if ( document.getElementById("ElementID").className.match(/(?:^|\s)CssClass(?!\S)/) )

— 正义
source

1

问题是如何删除样式，此答案与此无关。

— whitneyland '17