如何使用javascript删除CSS属性?

是否有可能删除一个元素的CSS属性使用JavaScript ? 例:我有div.style.zoom = 1.2， 现在我想通过JavaScript删除缩放属性?

376276 次浏览
小开
最佳答案

你有两个选择:

选项1:

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

el.style.removeProperty('zoom');

选项2:

可以设置为默认值:

el.style.zoom = "";

有效的缩放现在将是样式表中设置的定义(通过链接和样式标签)的任何内容。所以这个语法只会修改这个元素的局部样式。

小开

你可以试着找到所有具有这个类的元素，并将“zoom”属性设置为“nothing”。

如果你正在使用jQuery javascript库，你可以用$(".the_required_class").css("zoom","")来做

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

假:从JavaScript中修改样式表没有一般已知的方法。

小开

你可以使用styleSheets对象:

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

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

警告#2:该对象由浏览器实现不一致;在一种情况下有效的方法在另一种情况下不一定有效。

小开 
div.style.removeProperty('zoom');
小开

removeProperty将从元素中删除一个样式。

例子:

div.style.removeProperty(“变焦”);

MDN文档页面:
. txt CSSStyleDeclaration.removeProperty < / p >

小开

这应该做的技巧-设置内联样式为正常缩放:

$ (' div ')。attr(“风格”,“变焦:正常;”);

小开

实际上，如果你已经知道这个性质，这就可以了。

例如:

<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语句中转义一些字符，但您可以理解。

小开

你也可以在jQuery中通过$(selector).css("zoom", "")来做到这一点

小开

更改元素的所有类:

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

向元素中添加一个额外的类:

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

检查一个类是否已经应用于一个元素:

if ( document.getElementById("ElementID").className.match(/(?:^|\s)CssClass(?!\S)/) )
小开 
element.style.height = null;

输出:

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

提交答案