jquery get css

jquery get css

<style>.class{ height:450px;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> <div id="DP" class="class" style="width:100%;" ></div> <script>var elem = document.getElementsByClassName("class")[0]; elem = window.getComputedStyle(elem, null); // obj= elem.getPropertyValue("height"); var DPtxt ="" ; DPtxt += '<bc><center> get class css</center> </bc>' ; DPtxt += '＜style>' ; DPtxt += ' <br><r> .class</r> { height:450px; border:5px solid yellow ;font-size:20px ;<br> ' ; DPtxt += ' background-color:oldlace; }' ; DPtxt += '<br>＜/style>' ; DPtxt += '<br><br>＜div id="DP" <r> class="class"</r> style="width:100%;" >' ; DPtxt += '<br><br>** script output **' ; DPtxt += '<br>var elem = document.getElementsByClassName(<r>"class"</r>)[0];' DPtxt += '<br>elem = window.getComputedStyle(elem, null);' DPtxt += "<br><br>elem.width = " + elem.width; DPtxt += "<br>elem.height= " + elem.height; DPtxt += "<br>elem.border= " + elem.border; DPtxt += "<br>elem.fontSize= " + elem.fontSize; DPtxt += "<br>elem.backgroundColor = " + elem.backgroundColor; DP.innerHTML =DPtxt ; function rgb2hex(rgb) { if ( rgb.search("rgb") == -1 ) { return rgb; } else { rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); } } </script>

00

<style>#div { height:450px;border: 5px solid yellow ;font-size: 20px ;} r {color:red ;font-weight : bold ;} bc {color:blue ;font-weight:bold ;font-size: 35px;} </style> <div id="div" onclick="FFs(this)" style="width:100%;" ></div> <script>var style = getComputedStyle(div); var DPtxt = "" ; DPtxt += '<bc><center> get id css</center> </bc>' ; DPtxt += '＜style>' ; DPtxt +=' <br> <r>#div</r> { height:450px;border: 5px solid yellow ; ' ; DPtxt += ' font-size: 20px ;}' ; DPtxt += '<br>＜/style>' ; DPtxt += '<br><br>＜div <r>id="div"</r> style="width:100%;" >' ; DPtxt += '<br><br>** script output **<br>' ; DPtxt += "style = getComputedStyle(<r>div</r>)<br>" ; DPtxt += "<br>style.width = " + style.width; DPtxt += "<br>style.height = " + style.height; DPtxt += "<br>style.border = " + style.border; DPtxt += "<br>style.fontSize = " + style.fontSize; div.innerHTML= DPtxt ; </script>

00

<div id="myP" style=" font-size:30px; color:black; background-color: pink; border:2px dashed green; width:100%; height: 200px;"><b>cssText : 的本質就是設置 HTML 元素的 style 屬性值。</b><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:30px;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:30px; border:2px dashed green; width:100%; height: 200px;"; </button > <script>function DPcss() { var Tt = 'myP.style.<r>cssText</r> : Output ☟ <br>' ; Tt += myP.style.cssText ; DP.innerHTML = Tt ;} DPcss(); </script> <style>button {font-size : 20px} r {color:red} b {color:blue } </style>

00

<style>#test{font-size:20px;} </style> <font size=5 color=blue>cssObj = window.getComputedStyle(test, null)<br>cssObj.length 得到元素 CSS 屬性數量。<br>cssObj.getPropertyValue(cssObj[i]) 得到元素 CSS 屬性的數值<br><br></font> <div id="test"></div> <script> cssObj = window.getComputedStyle(test, null) var txt = "cssObj = window.getComputedStyle(test, null)"; txt += '<br>cssObj.length = ' + cssObj.length txt += '<br><br>cssObj[0] = ' + cssObj[0] ; txt += '<br>cssObj.getPropertyValue(cssObj[0]) = ' ; txt += cssObj.getPropertyValue(cssObj[0]) ; txt += '<br><br>cssObj[1] = ' + cssObj[1] ; txt += '<br>cssObj.getPropertyValue(cssObj[1]) = ' ; txt += cssObj.getPropertyValue(cssObj[1]); txt += "<BR><BR>cssObj.getPropertyValue('color') = " ; txt += cssObj.getPropertyValue('color')+"<br>"; txt += "cssObj.getPropertyValue('font-size') = " ; txt += cssObj.getPropertyValue('font-size')+"<br><br>"; for (i = 0; i < cssObj.length; i++) { txt+=cssObj[i] +" = "+cssObj.getPropertyValue(cssObj[i]) ; txt+= "<br>" } test.innerHTML = txt ; </script>

00

<style>#box1 {width: 100%; height: 100%; background-image: url("https://2.bp.blogspot.com/-J49rEZ8is-Q/W1yYyCc7pbI/AAAAAAAAR4w/4DldoRBaP9sQNss3ADBQMDujQLXbuiBtwCLcBGAs/s1600/images.jpg"); /*背景圖案*/ background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/ background-position: center; /*置中*/ background-repeat: no-repeat; /*背景圖案不重複*/ background-color:#CCCCCC; /*背景的顏色*/ font-size : 25px } </style> <div id="box1">1</div> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script>$( document ).ready(function() { DPcss() }); function DPcss(){ var ccsDt = new Array(); var styleProps = $( "#box1" ).css(["width", "height","background-image", "background-size", "background-position", "background-repeat" ,"background-color" ,"font-size" ]); $.each( styleProps, function( prop, value ) { ccsDt .push( prop + ": " + value ); }); var DP = "<font size=8>jquery get css </font><br><br>" DP += "CSS {" DP += ccsDt .join( "<br>" ); DP += " }" ; $( "#box1" ).html( DP ); }; </script>

00

jquery get css

jquery get css

<style>#box1 {width: 100%; height: 100%; background-image: url("https://2.bp.blogspot.com/-J49rEZ8is-Q/W1yYyCc7pbI/AAAAAAAAR4w/4DldoRBaP9sQNss3ADBQMDujQLXbuiBtwCLcBGAs/s1600/images.jpg"); /*背景圖案*/ background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/ background-position: center; /*置中*/ background-repeat: no-repeat; /*背景圖案不重複*/ background-color:#CCCCCC; /*背景的顏色*/ font-size : 25px } </style> <div id="box1">1</div> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script>$( document ).ready(function() { DPcss() }); function DPcss(){ var ccsDt = new Array(); var styleProps = $( "#box1" ).css(["width", "height", "background-size", "background-position", "background-repeat" ,"background-color" ,"font-size" ]); $.each( styleProps, function( prop, value ) { ccsDt .push( prop + ": " + value ); }); var DP = "CSS {" DP += ccsDt .join( "<br>           " ); DP += " }" ; $( "#box1" ).html( DP ); }; </script>

00