如何使用 JavaScript 获取直接应用于元素的所有 CSS 样式？

可以使用 JavaScript 中的getComputedStyle元素函数获取元素的 CSS。它返回一个包含 CSS 属性及其值的 JavaScript 对象。这个对象被索引并且可迭代属性名称。 getPropertyValue( property )用于获取属性的值。

在下面的代码中，将元素对象传递给getCSS( element )使用 getComputedStyle( element ) 和 getPropertyValue( property ) 获取所有属性，并将它们写入单独的部分。您可以滚动结果以查看所有属性。

示例 1：以下示例演示了获取id=’srcDiv’的

元素的所有属性。

HTML

  

    
        #srcDiv {
            width: 450px;
            font-family: sans-serif;
            text-align: justify;
            justify-content: center;
            color: green;
        }
  
        #resDiv {
            height: 300px;
            overflow: scroll;
        }
    
  
    
        function getCSS(element) {
            var css_data = '';
            var css_obj = getComputedStyle(element);
  
            for (var i = 0; i < css_obj.length; i++) {
                css_data +=
                    css_obj[i] + ':' + 
                    css_obj.getPropertyValue(css_obj[i])
                    + ';<br>';
            }
            document.getElementById('resDiv')
                    .innerHTML = css_data;
            return;
        }
    

  

    
  
    
        How to get all the 
        CSS of an element
    
    
      
    
        This is a demo paragraph for 
        explaining "How to get all the 
        CSS of an element". Properties 
        which are applied on this 
        division will appear in the
        next division on pressing the 
        button below.
    
    
  
    
        Get CSS
    
    
  
    

  

输出：单击“获取 CSS”按钮时，将显示输出。

示例 2：下面是获取带有 id=’inputTxt’ 的 元素的属性的示例。

HTML

  

    
        #srcDiv {
            width: 450px;
            font-family: sans-serif;
            text-align: justify;
            justify-content: center;
            color: green;
        }
  
        #inputTxt {
            color: red;
        }
  
        #resDiv {
            height: 300px;
            width: 600px;
            overflow: scroll;
        }
    
  
    
        function getCSS(element) {
            var css_data = '';
            var css_obj = getComputedStyle(element);
            for (var i = 0; i < css_obj.length; i++) {
                css_data +=
                    css_obj[i] + ':' + css_obj
                        .getPropertyValue(css_obj[i])
                        + ';<br>';
            }
            document.getElementById('resDiv')
                    .innerHTML = css_data;
            return;
        }
    

  

    
  
    
        How to get all the 
        CSS of an element
    
  
    
        This is a demo paragraph for explaining 
        "How to get all the CSS of an element". 
        Properties which are applied on the input 
        field will appear in the next division on
        pressing the button below.
    
    
  
    
  
    
        Get Input CSS
    
    
      
    

  

输出：单击“获取输入 CSS”按钮后，将显示以下输出。

注意：请注意每个示例中传递给getCSS()函数的对象。