如何使用JavaScript删除CSS属性?下面本篇就来给大家介绍一下使用JavaScript删除CSS属性的方法,希望对大家有所帮助。
方法一:使用removeProperty()方法
removeProperty()方法用于从元素的样式中移除属性。元素的样式是通过styleSheets数组并选择cssRules来选择的,然后使用RemoveProperty方法指定要删除的属性。
语法:
element.removeProperty('property')
示例:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>如何使用JavaScript删除CSS属性</title><style>.elem {color: green;font-size: 3rem;text-decoration: underline;}</style></head><body><div class="elem">Hello World!</div><p>单击下面的按钮删除元素的text-decoration属性--下划线</p><button onclick="removeProperty()"> 删除text-decoration属性</button><script>function removeProperty() {element =document.styleSheets[0].cssRules[0].style;element.removeProperty('text-decoration');}</script></body></html>
效果图:
方法二:使用setProperty()方法
setProperty()方法可用于设置样式所需的属性。可以选择必须删除属性的元素,使用setProperty()方法设置属性的值为“initial”将重置该属性为其初始值,达到删除该属性的任何效果。
语法
element.style.setProperty('color', 'initial')
例:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>如何使用JavaScript删除CSS属性</title><style>.elem {color: green;font-size: 3rem;text-decoration: underline;}</style></head><body><div class="elem">Hello World!</div><p>单击下面的按钮删除元素的color属性--文本颜色</p><button onclick="removeProperty()"> 删除color属性</button><script>function removeProperty() { element = document.querySelector('.elem'); element.style.setProperty('color', 'initial'); } </script></body></html>
效果图:
更多web前端知识,请查阅 HTML中文网 !!


















