✍ 📁 🙈 🙉 🙊 : getComputedStyle

<pre>               <t>document.querySelector() </t>
 回傳 第一個符合特定選擇器群組的元素。
      element = document.querySelector(selectors);
          element 是元素物件。
          selectors 是以逗號分隔，包含一個或多個 CSS 選擇器的字串。

例: var el = document.querySelector(".myclass");
     var el = document.querySelector("#myid");
     var el = document.querySelector("#myid");
     var el = document.querySelector("#myid");
     var el = document.querySelector("#myid");

<t> getComputedStyle()</t>
  回傳 所有計算的CSS屬性和指定元素的值。
  var style = window.getComputedStyle(element,pseudoElement);
          element:用於獲取計算樣式的元素。
          pseudoElement:要獲取的pseudo-element。這是一個可選參數。
 
 例: var Mid = document.querySelector("#myid");

var Ael =  getComputedStyle(Mid,null)
     var Bel =  getComputedStyle(Mid,':after')
     var Cel =  getComputedStyle(Mid,':hover')

<t>getPropertyValue()</t>
  回傳返回在聲明塊中聲明的CSS屬性的值。
 例:  Ael.getPropertyValue('height')
      Bel.getPropertyValue('color')
      Cel.getPropertyValue('border')

</pre>

</style>

<div style="display: flex;
          justify-content: center ;
          flex-flow: row;
           font-size:25px; color:blue">
document.querySelector() //  
getComputedStyle()
</div>

p:hover {color:black;
          border: 1px solid black;  }

p {height:800px;
    border: 1px solid blue;
    font-size:20px;
    color:blue}
</style>

DP.innerHTML =  "<pre><<?>style>" + CCS.innerHTML + "<<?>/style></pre>" ;
DP.innerHTML += "<pre> <<?>p id='DP'> <<?>/p> </pre>" ;
DP.innerHTML += "<<?>script>" ;
DP.innerHTML += "<br>var p= document.querySelector('p')," ;
DP.innerHTML += "<br>var After =  getComputedStyle(p, ':after')" ;
DP.innerHTML += "<br>var Null  =  getComputedStyle(p, null)" ;
DP.innerHTML += "<br>var Hover =  getComputedStyle(p, ':hover')" ;

DP.innerHTML += "<br><br>After.getPropertyValue('background-color') // " +
                After.getPropertyValue("background-color") ;
DP.innerHTML += "<br>After.getPropertyValue('color') // " +
                After.getPropertyValue("color") ;

DP.innerHTML += "<br><br>Hover.getPropertyValue('color') // " +
                Hover.getPropertyValue("color") ;
DP.innerHTML += "<br> Hover.getPropertyValue('border') // " +
                Hover.getPropertyValue("border") ;

DP.innerHTML += "<br><br> Null.getPropertyValue('height') // " +
                Null.getPropertyValue("height") ;
DP.innerHTML += "<br> Null.getPropertyValue('border') // " +
                Null.getPropertyValue("border") ;
DP.innerHTML += "<br>Null.getPropertyValue('font-size') // " +
                Null.getPropertyValue("font-size") ;
DP.innerHTML += "<br> Null.getPropertyValue('color') // " +
                Null.getPropertyValue("color") ;

</script>

Edit #html #style #script #javascript #CSS #getPropertyValue() #getComputedStyle() #document.querySelector() #CSS 相關 #get css #css Value

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單