Javascript 如何使用javascript删除css属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2027935/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to remove css property using javascript?
提问by sat
is it possible to remove a CSS property of an element using JavaScript ?
e.g. I have div.style.zoom = 1.2,
now i want to remove the zoom property through JavaScript ?
是否可以使用 JavaScript 删除元素的 CSS 属性？例如，我有div.style.zoom = 1.2，现在我想通过 JavaScript 删除缩放属性？
采纳答案by Roland Bouman
You have two options:
您有两个选择：
OPTION 1:
选项1：
You can use removeProperty method. It will remove a style from an element.
您可以使用removeProperty 方法。它将从元素中删除样式。
el.style.removeProperty('zoom');
OPTION 2:
选项 2：
You can set it to the default value:
您可以将其设置为默认值：
el.style.zoom = "";
The effective zoom will now be whatever follows from the definitions set in the stylesheets (through link and style tags). So this syntax will only modify the local style of this element.
有效缩放现在将遵循样式表中设置的定义（通过链接和样式标签）。所以这个语法只会修改这个元素的本地样式。
回答by Edvinas Il?enko
removePropertywill remove a style from an element.
removeProperty将从元素中删除样式。
Example:
例子：
div.style.removeProperty('zoom');
div.style.removeProperty('缩放');
MDN documentation page:
CSSStyleDeclaration.removeProperty
MDN 文档页面：
CSSStyleDeclaration.removeProperty
回答by joe
div.style.removeProperty('zoom');
回答by james.garriss
You can use the styleSheets object:
您可以使用 styleSheets 对象：
document.styleSheets[0].cssRules[0].style.removeProperty("zoom");
Caveat #1: You have to know the index of your stylesheet and the index of your rule.
警告 #1：您必须知道样式表的索引和规则的索引。
Caveat #2: This object is implemented inconsistently by the browsers; what works in one may not work in the others.
警告#2：浏览器对这个对象的实现不一致；在一种情况下有效的方法可能在其他情况下无效。
回答by T.Todua
element.style.height = null;
output:
输出：
<div style="height:100px;">
// results:
<div style="">
回答by naivists
You can try finding all elements that have this class and setting the "zoom" property to "nothing".
您可以尝试查找所有具有此类的元素并将“缩放”属性设置为“无”。
If you are using jQuery javascript library, you can do it with $(".the_required_class").css("zoom","")
如果您使用的是 jQuery javascript 库，则可以使用 $(".the_required_class").css("zoom","")
Edit: Removed this statement as it turned out to not be true, as pointed out in a comment and other answers it has indeed been possible since 2010.
编辑：删除此声明，因为事实证明它不正确，正如评论和其他答案中指出的那样，自 2010 年以来确实有可能。
False: there is no generally known way for modifying stylesheets from JavaScript.
错误：没有众所周知的从 JavaScript 修改样式表的方法。
回答by TryingToImprove
You can also do this in jQuery by saying $(selector).css("zoom", "")
您也可以通过说在 jQuery 中执行此操作 $(selector).css("zoom", "")
回答by Matt
This should do the trick - setting the inline style to normal for zoom:
这应该可以解决问题 - 将内联样式设置为正常缩放：
$('div').attr("style", "zoom:normal;");
$('div').attr("style", "zoom:normal;");
回答by MaxOvrdrv
actually, if you already know the property, this will do it...
实际上，如果您已经知道该属性，则可以这样做...
for example:
例如：
<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;
}
Note that this only works for inline styles... not styles you've specified through a class or something like that...
请注意，这仅适用于内联样式……不适用于您通过类或类似内容指定的样式……
Other note: you may have to escape some characters in that replace statement, but you get the idea.
其他注意事项：您可能需要转义替换语句中的某些字符，但您明白了。
回答by thejustv
To change all classes for an element:
要更改元素的所有类：
document.getElementById("ElementID").className = "CssClass";
To add an additional class to an element:
向元素添加额外的类：
document.getElementById("ElementID").className += " CssClass";
To check if a class is already applied to an element:
要检查类是否已应用于元素：
if ( document.getElementById("ElementID").className.match(/(?:^|\s)CssClass(?!\S)/) )
