✍ 📁 🙈 🙉 🙊 : Get a CSS value with JavaScript

Get a style value with JavaScript

<div id="myP">
<table border="1" rules="all" >
<tr><td id="ccstable1">第一行 欄位 1</td><td>
<select id="Swidth" onchange="Changecss('wh' , this.value)" style="width:150px" >
    <option value="3 位人士" style="display:none;">width</OPTION>
    <option value="100%">100%</OPTION>
    <option value="80%">80%</OPTION>
    <option value="60%">60%</OPTION>
    <option value="40%">40%</OPTION>
</SELECT>
</td></tr>
<tr><td id="ccstable2">第一行 欄位 1</td><td>
<select id="selectSort" style="width:150px" >
    <option value="3 位人士" style="display:none;">height</OPTION>
    <option value="2 位人士">2 位人士</OPTION>
    <option value="0 位人士">0 位人士</OPTION>
    <option value="1 位人士">1 位人士</OPTION>
    <option value="4 位人士">4 位人士</OPTION>
</SELECT></td></tr>
<tr><td id="ccstable3">第一行 欄位 1</td><td>
<select id="selectSort" style="width:150px" >
    <option value="3 位人士" style="display:none;">background-size</OPTION>
    <option value="2 位人士">2 位人士</OPTION>
    <option value="0 位人士">0 位人士</OPTION>
    <option value="1 位人士">1 位人士</OPTION>
    <option value="4 位人士">4 位人士</OPTION>
</SELECT></td></tr>
<tr><td id="ccstable4">第一行 欄位 1</td><td>
<select id="selectSort" style="width:150px" >
    <option value="3 位人士" style="display:none;">background-position</OPTION>
    <option value="2 位人士">2 位人士</OPTION>
    <option value="0 位人士">0 位人士</OPTION>
    <option value="1 位人士">1 位人士</OPTION>
    <option value="4 位人士">4 位人士</OPTION>
</SELECT>
</td></tr>
<tr><td id="ccstable5">第一行 欄位 1</td><td>
<select id="selectSort" style="width:150px" >
    <option value="3 位人士" style="display:none;">background-repeat</OPTION>
    <option value="2 位人士">2 位人士</OPTION>
    <option value="0 位人士">0 位人士</OPTION>
    <option value="1 位人士">1 位人士</OPTION>
    <option value="4 位人士">4 位人士</OPTION>
</SELECT>
</td></tr>
<tr><td id="ccstable6">第二行 欄位 1</td><td>
<select id="selectSort" style="width:150px" >
    <option value="3 位人士" style="display:none;">background-color</OPTION>
    <option value="2 位人士">2 位人士</OPTION>
    <option value="0 位人士">0 位人士</OPTION>
    <option value="1 位人士">1 位人士</OPTION>
    <option value="4 位人士">4 位人士</OPTION>
</SELECT>
</td></tr>

</tbody>
</table>
</div>
<style>
#myp{width: 95%; height: 95%;
 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;      /*背景的顏色*/ 
</style>

function Changecss(x1 , x2){
var elem,    style;
elem = document.querySelector('#myp');
style = getComputedStyle(elem);
if(x1=="wh"){
style.width = "50"+"xp"
alert(style.width);}

DPC();
}

DPC();
</script>

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單