getComputedStyle

<pre> <t>document.querySelector() </t><br /> 回傳 第一個符合特定選擇器群組的元素。<br /> element = document.querySelector(selectors);<br /> element 是元素物件。<br /> selectors 是以逗號分隔，包含一個或多個 CSS 選擇器的字串。<br /><br /> 例: var el = document.querySelector(".myclass");<br /> var el = document.querySelector("#myid");<br /> var el = document.querySelector("#myid");<br /> var el = document.querySelector("#myid");<br /> var el = document.querySelector("#myid");<br /><br /> <t> getComputedStyle()</t><br /> 回傳 所有計算的CSS屬性和指定元素的值。<br /> var style = window.getComputedStyle(element,pseudoElement);<br /> element:用於獲取計算樣式的元素。<br /> pseudoElement:要獲取的pseudo-element。這是一個可選參數。<br /> <br /> 例: var Mid = document.querySelector("#myid"); <br /><br /> var Ael = getComputedStyle(Mid,null)<br /> var Bel = getComputedStyle(Mid,':after')<br /> var Cel = getComputedStyle(Mid,':hover')<br /><br /> <t>getPropertyValue()</t><br /> 回傳返回在聲明塊中聲明的CSS屬性的值。<br /> 例: Ael.getPropertyValue('height')<br /> Bel.getPropertyValue('color')<br /> Cel.getPropertyValue('border')<br /><br /><br /></pre> <style>pre {font-size:20px} t {font-size:26px;color:blue} </style>

00

<div style="display: flex; justify-content: center ; flex-flow: row; font-size:25px; color:blue">document.querySelector() // getComputedStyle() </div> <style id="CCS"> p::after { background: rgb(255, 0, 255); color:rgb(1, 2, 3) } p:hover {color:black; border: 1px solid black; } p {height:800px; border: 1px solid blue; font-size:20px; color:blue} </style> <p id="DP"> </p> <script > var p= document.querySelector('p') ; var After = getComputedStyle(p, ':after') ; var Null = getComputedStyle(p, null) ; var Hover = getComputedStyle(p, ':hover') ; 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>

00

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