如何使用 JavaScript 删除使用 .css()函数添加的样式？

有很多情况，特别是当内容变得更具交互性时，开发人员希望样式根据用户输入动态启动，一些代码在后台运行，等等。在这些场景中，涉及样式规则或内联样式的 CSS 模型无济于事。

克服所有这些问题的解决方案是一个涉及 JavaScript/jQuery 的解决方案。它不仅可以为用户交互的元素设置样式，更重要的是，它还允许开发人员为整个页面的元素设置样式。这种自由非常强大，远远超出了 CSS 在其内部设置内容样式的有限能力。

• JavaScript：
  • removeAttribute() ：它从元素中删除具有指定名称的属性。
  • setAttribute() ：它设置指定元素上的属性值。

  示例 1：下面的示例说明了如何在 JavaScript 中设置/删除样式。

    
  
      
      JavaScript example
  
    
  
      
          
            Welcome to geeks for geeks
        
      
      
        Set Style
    
      
        Remove Style
    
    
  
    
  
      removestyle = () => {
          document.getElementById(
            "gfg").removeAttribute("style");
          
          document.getElementById(
            "setstyle").removeAttribute("disabled");
          
          document.getElementById(
            "removestyle").setAttribute("disabled", "true");
      };
  
    

  输出：
  造型前：
  

  
  
  
  

  点击设置样式后：
  

  单击删除样式后：
  

• jQuery：
  • css() ：它为所选元素设置或返回一个或多个样式属性。
  • attr() ：用于设置或返回被选元素的属性和值。
  • removeAttr() ：它从所选元素中删除一个或多个属性。

  
  示例 2：下面的示例说明了如何在 jQuery 中设置/删除样式。

    
  
      
      Jquery example
      
    
  
    
  
      
          
            Welcome to geeks for geeks
        
      
      
        Set Style
    
      
        Remove Style
    
    
  
    
  
      $(document).ready(() => {
          setstyle = () => {
              $("#gfg").css({
                  "color": "white",
                  "background-color": "green",
                  "padding": "10px",
              });
              $("#setstyle").attr("disabled", "true");
              $("#removestyle").removeAttr("disabled");
          }
      });
  
    

  输出：
  造型前：
  

  点击设置样式后：
  

  单击删除样式后：