當前位置:軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > 編程其他 > 利用JS實現(xiàn)表格設(shè)置為“100%”時獲取表格的寬度

利用JS實現(xiàn)表格設(shè)置為“100%”時獲取表格的寬度

2012/10/30 15:40:31作者:佚名來源:網(wǎng)絡(luò)

移動端

【實例名稱】

JS代碼實現(xiàn)表格設(shè)置為“100%”時獲取表格的寬度

【實例描述】

為了控制表格的單元格不被撐破,通常使用百分比的形式設(shè)置表格的寬度,如“width=70%”本例學(xué)習(xí)如何在表格設(shè)置為百分比寬度時,獲取表格的實際寬度。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>標題頁-學(xué)無憂(www.wangbatian.cn)</title> <script LANGUAGE="JavaScript"> function getWidth() {    var tbl=event.srcElement;   //獲取表格對象    tbl.innerText=tbl.offsetWidth+'px'; //返回表格對象的實際寬度 } </script> </head> <body> <table width="100%"  height="100" border="1" cellpadding="0" cellspacing="0" >   <tr>     <td id="tbl1" onMouseOver="getWidth()">光標移過來</td> <td id="tbl2" onMouseOver="getWidth()">光標移過來</td>   </tr> </table></body> </html>

【運行效果】

運行效果

【難點剖析】

本例的重點是“offsetWidth”屬性,表示對象的可視寬度。實現(xiàn)原理是由“event.srcElement”屬性獲取當前操作的表格,然后使用“offsetWidth”屬性獲取當前單元格的寬度,最后使用“innerText”屬性將寬度值顯示在單元格內(nèi)。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準確性,你可以點擊:表格設(shè)置為“100%”時獲取表格的寬度 進行本實例源碼下載 

標簽: 利用JS  表格  寬度