JavaScript 如何获取应用于元素的全部CSS样式

可以使用JavaScript中的getComputedStyle元素函数来获取元素的CSS样式。它返回一个包含CSS属性及其值的JavaScript对象。这个对象可通过属性名进行索引和迭代。使用getPropertyValue(属性)来获取属性的值。

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

示例1： 下面的示例演示了如何获取具有id=’srcDiv’的

元素的所有属性。

<head> 
    <style> 
        #srcDiv { 
            width: 450px; 
            font-family: sans-serif; 
            text-align: justify; 
            justify-content: center; 
            color: green; 
        } 
          
        #resDiv { 
            height: 300px; 
            overflow: scroll; 
        } 
    </style> 
      
    <script> 
        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; 
        } 
    </script> 
</head> 
<body> 
    <img src="logo.png" /><br /> 
      
    <h3> 
        How to get all the 
        CSS of an element 
    </h3> 
    <br /> 
      
    <div id="srcDiv"> 
        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. 
    </div> 
    <br /><br /> 
      
    <button onclick="getCSS(document 
            .getElementById('srcDiv'))"> 
        Get CSS 
    </button> 
    <br /><br /> 
      
    <div id="resDiv"></div> 
</body

输出： 点击“获取CSS”按钮后，输出显示。

JavaScript 如何获取应用于元素的全部CSS样式

示例2： 以下是一个获取id为’inputTxt’的元素属性的示例。

<head> 
    <style> 
        #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; 
        } 
    </style> 
      
    <script> 
        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; 
        } 
    </script> 
</head> 
<body> 
    <img src="logo.png" /><br /> 
      
    <h3> 
        How to get all the 
        CSS of an element 
    </h3> 
      
    <div id="srcDiv"> 
        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. 
    </div> 
    <br /> 
      
    <input id="inputTxt" type="number" placeholder="Input Number" /> 
      
    <button onclick="getCSS(document 
            .getElementById('inputTxt'))"> 
        Get Input CSS 
    </button> 
    <br /><br /> 
      
    <div id="resDiv"></div> 
</body>