jquery get css

jquery get css

<pre><bc>get class css</bc> <<c>style> .class{ height:380px;width:98%; border: 5px solid yellow ;font-size: 20px ; background-color:oldlace; } <<c>/style> <div id="DP" class="class" ></div> </pre> <style> .class{ height:380px;width:98%; border: 5px solid yellow ;font-size: 20px ; background-color:oldlace; } r {color:red ;font-weight : bold ;} bc {color:blue ;font-weight:bold ;font-size: 35px;} </style> <script> var xx= document.getElementsByClassName("class")[0]; elem = window.getComputedStyle(xx, null); var DPtxt ="<pre><<c>script>\n" ; DPtxt += ' var xx = document.getElementsByClassName(<r>"class"</r>)[0];' DPtxt += '\n elem = window.getComputedStyle(xx, null);' DPtxt += '\n xx // ' + xx ; DPtxt += '\n elem // ' + elem ; DPtxt += "\n\n elem.width // " + elem.width; DPtxt += "\n elem.height // " + elem.height; DPtxt += "\n elem.border // " + elem.border; DPtxt += "\n elem.fontSize // " + elem.fontSize; DPtxt += "\n elem.backgroundColor // " + elem.backgroundColor; DPtxt += "\n<<c>/script></pre>" ; DP.innerHTML =DPtxt ; </script>

00

<pre><bc>get id css</bc> <<c>style> #div { width:98%; height:380px ; border: 5px solid yellow ; font-size: 20px ;} <<c>/style> <div id="div" ></div></pre> <style> #div { width:98%; height:380px ; border: 5px solid yellow ; font-size: 20px ;} r {color:red ;font-weight : bold ;} bc {color:blue ;font-weight:bold ;font-size: 35px;} </style> <script> var style = getComputedStyle(div); var DPtxt = "" ; DPtxt += "<pre><<c>script>\n" ; DPtxt += " var style = getComputedStyle( div ) \n" ; DPtxt += " style // " + style + " \n" ; DPtxt += "\n style.width // " + style.width ; DPtxt += "\n style.height // " + style.height ; DPtxt += "\n style.border // " + style.border ; DPtxt += "\n style.fontSize // " + style.fontSize ; DPtxt += "\n or " + "\n"; DPtxt += "\n div.width // " + style.width ; DPtxt += "\n div.height // " + style.height ; DPtxt += "\n div.border // " + style.border ; DPtxt += "\n div.fontSize // " + style.fontSize ; DPtxt += "\n<<c>/script>" ; DPtxt += "</pre>" ; div.innerHTML= DPtxt ; </script>

00

<bc>elem.style.cssText</bc> <div id="myP" style=" font-size:20px; color:black; background-color: pink; border:2px dashed green; width:100%; height: 200px;"> <b>cssText : The cssText property sets or returns the contents of a style declaration as a string。<br> cssText 屬性將樣式聲明的內容設置或返回為字符串。<br> this id="myP" <div id="DP" ></div> </div> <br> <button onclick='myP.style.cssText="background-color: pink; font-size:20px;border: 2px dashed green; color:red;width: 100%;height: 200px;";DPcss()' > <r>myP.style.cssText</r> = " <b>font-size:20px; color:red;</b> background-color: pink; border:2px dashed green; width:100%; height: 200px;"; </button > <br> <button onclick='myP.style.cssText="background-color: orange; font-size:16px;border: 2px dashed green; color:blue;width: 100%;height: 200px;";DPcss()' > <r>myP.style.cssText</r> = "<b> background-color: orange; color:blue; </b> font-size:16px; border:2px dashed green; width:100%; height: 200px;"; </button > <style> button {font-size : 20px} r {color:red} b {color:blue } bc {color:blue ;font-weight:bold ;font-size: 35px;} </style>

00

<bc>window.getComputedStyle(element, null)<br> cssObj.getPropertyValue(propertyname) </bc> <pre> <<c>script> var cssObj = window.getComputedStyle( DP , null) var txt="" ; for (i = 0; i < cssObj.length; i++) { txt += cssObj[i] +" = "+cssObj.getPropertyValue(cssObj[i]) ; txt += "<<c>br>" } DP.innerHTML = txt ; <<c>/script> <</c>div id="DP"></div> </pre> <div id="DP"></div> <script> var cssObj = window.getComputedStyle(DP, null) var txt="" ; txt += 'cssObj.length = ' + cssObj.length ; txt += '<br>' ; for (i = 0; i < cssObj.length; i++) { txt+=cssObj[i] +" = "+cssObj.getPropertyValue(cssObj[i]) ; txt+= "<br>" } DP.innerHTML = txt ; </script> <style> button {font-size : 20px} r {color:red} b {color:blue } bc {color:blue ;font-weight:bold ;font-size: 35px;} </style>

00

Edit

#html #網頁格式 #style #div