如何使用 JavaScript 删除 CSS 属性？

方法 1：使用 CSS removeProperty： CSSStyleDeclaration.removeProperty()方法用于从元素的样式中删除属性。通过遍历 styleSheets 数组并选择 cssRule 来选择元素的样式。然后可以使用要删除的属性指定 removeProperty 方法。

句法：

element.removeProperty('property')

示例 1：

  

    
      How to remove CSS property using JavaScript?
  
    
        .elem {
            color: green;
            font-size: 3rem;
            text-decoration: underline;
        }
    

  

    
      GeeksForGeeks
  
    
      How to remove CSS property using JavaScript?
  
    Hello World!
    
      Click on the button below to remove
      the text decoration of the element
  
    
      Remove text-decoration property
  
    
        function removeProperty() {
            element = 
              document.styleSheets[0].cssRules[0].style;
            element.removeProperty('text-decoration');
        }
    

  

输出：

• 点击按钮前：
  
• 点击按钮后：
  

方法二：使用 setProperty 方法：可以使用CSSStyleDeclaration.setProperty()方法设置样式所需的属性。选择必须删除其属性的元素，并将此属性应用于其样式属性。将此属性设置为‘initial’会将属性重置为其初始值，从而消除该属性的任何影响。

句法：

element.style.setProperty('color', 'initial')

例子：

  

    
      How to remove CSS property using JavaScript?
  
    
        .elem {
            color: green;
            font-size: 3rem;
            text-decoration: underline;
        }
    

  

    
      GeeksForGeeks
  
    
      How to remove CSS property using JavaScript?
  
    Hello World!
    
      Click on the button below to remove the text
      color of the element
  
    
      Remove color property
  
    
        function removeProperty() {
            element = document.querySelector('.elem');
            element.style.setProperty('color', 'initial');
        }
    

  

输出：

• 点击按钮前：
  
• 点击按钮后：