📌  相关文章
📜  如何使用 JavaScript 获取直接应用于元素的所有 CSS 样式?

📅  最后修改于: 2021-08-29 13:15:30             🧑  作者: Mango

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

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

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

元素的所有属性。

HTML


  

    
  
    

  

    
       

        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.     
    

            

       
  


HTML


  

    
  
    

  

    
       

        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.     
    
                    

           
  


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

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

HTML



  

    
  
    

  

    
       

        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.     
    
                    

           
  

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

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