如何使用 jQuery 获取与元素关联的所有 CSS 样式？

给定一个包含一些 CSS 属性的 HTML 文档，任务是使用 jQuery 获取特定元素的所有 CSS 样式。这两种方法如下。

方法 1：使用document.defaultView.getComputedStyle()方法获取与该特定元素关联的所有级联样式。之后，通过遍历对象将样式一一附加到字符串。

• 示例：以下示例实现了上述方法。

    
  
      
          Getting all the CSS styles 
          of an element using jQuery
      
  
    
  
    
      GeeksForGeeks
    
      
    
      
          Click Here
      
    
      
    
      
          var up = document.getElementById('GFG_UP');
          var down = document.getElementById('GFG_DOWN');
            
          up.innerHTML = "Click on the buttob "
              + "to get the all CSS styles "
              + "associated with the element.";
          function GFG_Fun() {
              var ar = document.defaultView
                  .getComputedStyle(up, null);
              var str = "";
              for (var key in ar) {
                  str = str + key + ': ' 
                      + ar[key] + "-";
              }
              down.innerHTML = str;
          }
      
  
    

• 输出：
  

方法 2：在此示例中，仅提取特定样式。我们可以传递样式的名称。在这种方法中，定义了一个cssSpecific方法，它对传递的字符串执行字符串操作，并从对象中获取属性并将它们作为字符串返回。

• 示例：此示例实现了上述方法。

    
  
      
          Getting all the CSS styles 
          of an element using jQuery
      
        
      
      
  
    
  
    
      GeeksForGeeks
    
      
    
      
          Click Here
      
        
      
    
      
          var up = document.getElementById('GFG_UP');
          var down = document.getElementById('GFG_DOWN');
          up.innerHTML = "Click on the buttob to get"
                  + " the all CSS styles associated "
                  + "with the element.";
    
          (function ($) {
              $.fn.cssSpecific = function (str) {
                  var ob = {};
                  if (this.length) {
                      var css = str.split(', ');
                      var prms = [];
                      for (var i = 0, ii = css.length; 
                                      i < ii; i++) {
                          prms = css[i].split(':');
    
                          ob[$.trim(prms[0])] = $(this)
                          .css($.trim(prms[1] || prms[0]));
                      }
                  }
                  return ob;
              };
          })(jQuery);
          function GFG_Fun() {
              var styles = $('#GFG_UP').cssSpecific(
  'color, backgroundColor, opacity, height, lineHeight:height');
              down.innerHTML = JSON.stringify(styles);
          }
      
  
    

• 输出：