[jQuery]CSS--寬(Width) , 高(Height)
語法：
- 取得物件的寬、高
- var tblWidth=$('#tbl1').width();
- var tblHeight=$('＃tbl1').height();
- 設定物件的寬、高
- $('#div1').width(200);
- $('#div1').height(200);
範例：
<HTML>
<HEAD>
<script type="Text/JavaScript" src="js/jQuery.js"></script>
<script type="Text/JavaScript">
$(document).ready(function(){
$('#btn1').click(function(){
var tblWidth=$('#tbl1').width();
var tblHeight=$('#tbl1').height();
$('#span1').html('Width:' + tblWidth + '<br>Height:' + tblHeight);
});
$('#btn2').click(function(){
$('#div1').width(200);
$('#div1').height(200);
});
})
</script>
<style>
.d1{
background-color:yellow;
color:blue;
font-size:18px;
}
</style>
</HEAD>
<BODY>
<FORM action="" method=POST id=form1 name=form1>
<input type="button" id="btn1" name="btn1" value="取得Table的寬高">
<br>
<input type="button" id="btn2" name="btn2" value="設定Div的寬高">
<br>
<span id="span1"></span>
<table border="1" id="tbl1">
<thead>
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
<th>h4</th>
<th>h5</th>
<th>h6</th>
</tr>
</head>
<tbody>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
<td>d5</td>
<td>d6</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
<td>d5</td>
<td>d6</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
<td>d5</td>
<td>d6</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
<td>d5</td>
<td>d6</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
<td>d5</td>
<td>d6</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
<td>d5</td>
<td>d6</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
<td>d5</td>
<td>d6</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
<td>d5</td>
<td>d6</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
<td>d5</td>
<td>d6</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
<td>d5</td>
<td>d6</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
<td>d5</td>
<td>d6</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
<td>d5</td>
<td>d6</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
<td>d5</td>
<td>d6</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
<td>d5</td>
<td>d6</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
<td>d5</td>
<td>d6</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
<td>d5</td>
<td>d6</td>
</tr>
</tbody>
</table>
<hr>
<div id="div1" style="border: 1px solid #000000; width: 438px; height: 30px;">div1</div>
</FORM>
</BODY>
</HTML>
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |