如何使用 JavaScript 读取 CSS 规则值？

可以使用 DOM（文档对象模型）读取和操作 CSS 规则。要使用 JavaScript 读取所有嵌入式 CSS 规则，我们可以使用以下方法。

方法一：

• 使用document.getElementsByTagName(“STYLE”);并获取所有 CSS 标签。
• 检查长度是否为 0，然后“未使用样式标签”。
• 否则，使用 for 循环显示所有标签

例子：

  

    CSS rule values with JS
    
    
    
    
    
        h1 {
            text-align: center;
            color: green;
        }
          
        #my_para {
            font-family: 'Satisfy', cursive;
            text-align: justify;
            background-color: powderblue;
            font-size: 130%;
        }
    

  

  
    
        GeeksforGeeks
        
        Cascading Style Sheets, fondly referred
          to as CSS, is a simply designed language intended to
          simplify the process of making web pages presentable.
          CSS allows you to apply styles to web pages. More importantly,
          CSS enables you to do this independent of the 
          HTML that makes up each web page.
        
            
        
    
  
    
        function alert_css() {
            var style_text = "";
            var style_elements = document.getElementsByTagName("STYLE");
            if (style_elements.length == 0)
                alert("No Style Tag!"); 
               //or use console.log("No Style Tag!");
            else {
                for (var i = 0; i < style_elements.length; i++)
                    style_text += style_elements[i].outerHTML;
                style_text = style_text.toString().replace(/\t/g, '').split('\r\n');
                alert(style_text); 
                //or use console.log(style_text);
            }
        }
        document.getElementById("my_button1").onclick = alert_css;
    
  

  

输出：

• 前：
  
• 单击“读取所有 CSS 值”按钮后：
  

方法二：

• 使用window.getComputedStyle(elem, null); 获取所有实际的（计算的）CSS 属性和值；
• 借助“for 循环”显示所有 CSS 属性。

例子：

  

    CSS rule values with JS
    
    
    
    
    
        h1 {
            text-align: center;
            color: green;
        }
          
        #my_para {
            font-family: 'Satisfy', cursive;
            text-align: justify;
            background-color: powderblue;
            font-size: 130%;
        }
    

  

  
    
        GeeksforGeeks
        
        Cascading Style Sheets, fondly referred to as
          CSS, is a simply designed language intended to simplify 
          the process of making web pages presentable. CSS allows 
          you to apply styles to web pages. More importantly, CSS 
          enables you to do this independent of the HTML that makes 
          up each web page.
        
        
            
        
        CSS Values:
        
    
  
    
        function append_css(div_name, id_name) {
            var elem = document.getElementById(id_name);
            var txt = "";
            var cssObj = window.getComputedStyle(elem, null);
  
            for (i = 0; i < cssObj.length; i++) {
                cssObjProp = cssObj.item(i);
                txt += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
            }
            document.getElementById(div_name).innerHTML = txt;
        }
        document.getElementById("my_button1").addEventListener('click', function() {
            append_css("my_div", "my_para");
        }, false);
    
  

  

输出：

• 前：
  
• 单击“读取所有 CSS 值”按钮后：
  

笔记：
弹出消息的字数限制，如果内容很大，可能不会显示全部内容，这种情况可以使用console.log()函数（代码中注释），它会打印相同的内容控制台。