如何使用javascript删除css属性？

Posted 2023-02-22

【中文标题】如何使用javascript删除css属性？

【英文标题】：how to remove css property using javascript?

【发布时间】：2011-01-02 22:21:16

【问题描述】：

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

【问题讨论】：

请澄清：您是要从某个元素中删除一个类，还是从某个元素中删除一个属性？

对不起，不是类，元素的属性。

他们投了反对票，因为问题写得不好

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

@RolandBouman 实际上应将接受的答案更改为 Edvinas Ilčenko 的答案，因为它解决了有关删除的问题，而不是更改为默认值。您的答案仍然有价值，因此我对其进行了编辑以澄清区别。

【参考方案1】：

你有两个选择：

选项 1：

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

el.style.removeProperty('zoom');

选项 2：

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

el.style.zoom = "";

现在，有效缩放将是样式表中设置的定义（通过链接和样式标签）。所以这个语法只会修改这个元素的本地样式。

【讨论】：

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

我理解 OP 的意思是他们想让它看起来好像他们没有设置元素的样式属性，这正是你提供的。我尝试使用 el.style.removeProperty('zoom'); （或“填充”，实际上，在我的情况下）似乎在 IE 中做同样的事情，并被其他浏览器忽略。出于某种原因，我惊讶地发现将其设置为空白字符串具有相同的效果，并且似乎适用于所有（最新版本的）浏览器。

此行为是否在标准中的任何地方指定？我找不到它:-(

@OliverJosephAsh 是的，它已记录在案，请参阅下面的答案***.com/a/7901886/700206

【参考方案2】：

removeProperty 将从元素中删除样式。

例子：

div.style.removeProperty('zoom');

MDN 文档页面：CSSStyleDeclaration.removeProperty

【讨论】：

这很好，因为类中的样式将被应用。

【参考方案3】：

div.style.removeProperty('zoom');

【参考方案4】：

您可以使用 styleSheets 对象：

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

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

警告 #2：这个对象在浏览器中的实现不一致；对一个有效的东西可能对其他无效。

【讨论】：

这看起来真的很脆弱。每当您的索引发生变化时，它不会中断吗？

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

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

CSSStyleSheet.prototype.removeRule 来救援。

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

【参考方案5】：

element.style.height = null;

输出：

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

【讨论】：

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

为什么有人应该关心IE 浏览器？我已经故意忽略它们多年了。

@T.Todua 浏览器名称是否需要使用内联代码块？但是，是的，我完全同意——微软自 2016 年起停止支持该浏览器。

【参考方案6】：

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

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

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

错误：没有众所周知的方法可以从 JavaScript 修改样式表。

【讨论】：

是的，有。以编程方式修改样式表虽然 javascript 并不难。它可以跨浏览器工作，具有出色的性能，并且在更改一堆元素上应该相同的一个属性时确实很有意义。 2010 年 1 月的情况也是如此。这是一个简短的示例：***.com/questions/14927706/…

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

它的意思是css()而不是attr()。或者它可能是 IE 中的 attr()？

它实际上应该是css，而不是attr，你是对的。

【参考方案7】：

您也可以在 jQuery 中通过说 $(selector).css("zoom", "") 来执行此操作

【参考方案8】：

这应该可以解决问题 - 将内联样式设置为正常缩放：

$('div').attr("style", "zoom:normal;");

【讨论】：

问题是如何删除样式，这个答案将破坏所有存在的样式并用一个新条目替换它们。

【参考方案9】：

其实，如果你已经知道了这个属性，就可以了……

例如：

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

请注意，这只适用于内联样式...不适用于您通过类或类似的东西指定的样式...

其他注意事项：您可能需要转义该替换语句中的某些字符，但您明白了。

【参考方案10】：

更改一个元素的所有类：

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

向元素添加额外的类：

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

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

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

【讨论】：

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