通過js程式碼來改變div的寬度
阿新 • • 發佈：2019-08-23
當做網頁圖片的切換時，有的做法是將兩個div並排在一起，但是隻能顯示一個div的寬度，當要切換圖片時將一個div的寬度從一個寬度值改為0，就實現了簡單的圖片替換了。 首先，我們將要更改寬度的div擺上來
<html lang="en"> <head> <meta charset="UTF-8"> <title>測試</title> <style> #ddd{ background-color: red; } </style> </head> <body> <div id= "ddd" style="width:800px;height:500px"></div> <button onClick="change();" type="button" class="slick-prev slick-arrow" >button</button> </body> </html>
一個背景顏色為紅色的div，使用按鈕來改變大小 然後我們需要加上一段js程式碼，來修改掉這個div的大小
<script> function change() { var mywidth=document.getElementById("ddd").clientWidth; if(mywidth!="100") { ddd.style.width=(mywidth-700)+"px"; }else { ddd.style.width=(mywidth+700)+"px"; } alert(mywidth.style.width); } </script>
改變高度同理，下面是測試完整程式碼：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
<style>
#ddd{
background-color: red;
}
</style>
<script>
function change() {
var mywidth=document.getElementById("ddd").clientWidth;
if(mywidth!="100")
{
ddd.style.width=(mywidth-700)+"px";
}else
{
ddd.style.width=(mywidth+700)+"px";
}
alert(mywidth.style.width);
}
</script>
</head>
<body>
<div id= "ddd" style="width:800px;height:500px"></div>
<button onClick="change();" type="button" class="slick-prev slick-arrow" >button</button>
</body>
&l