前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何用 js 获取table 或者其他块状标签的 宽和高

如何用 js 获取table 或者其他块状标签的 宽和高

作者头像
林冠宏-指尖下的幽灵
发布2018-01-02 16:43:06
5.5K0
发布2018-01-02 16:43:06
举报

这个比较简单,总体思想,标签标记一个id,js获取id,就能用它的属性了。介绍两种方法。请看下面代码。

第一种

代码语言:javascript
复制
  1 <script>
  2 
  3 function width_table_all() {
  4           
  7             var tabl = document.getElementById("tabl").offsetWidth;
  8             alert(tabl);
 11         }183 </script>

这个是js的函数,offsetWidth是一个属性。tabl是id,请看下面的table 里面的id

代码语言:javascript
复制
 1 <table id="tabl" width="100%"  height='80%' border='0' style='border-collapse: collapse' cellpadding='0' cellspacing='0' >
 2      <tr>
 3       <td colspan='3'><img src='pack_map/1.png' width='100%' height='100%'></td>
 4         
 5       </tr>
 6       <tr>
 7         <td id="td_1" align='left' valign="top" width='60%' height='20%'><img src='pack_map/2.jpg' width='100%' height='100%'></td>
 8         <td id="td_2"  align='left'  width='13%' ><img src='pack_map/5.jpg' width='100%' height='100%'></td>
 9         <td id="td_3"  align='left'  width='30%' ><img src='pack_map/4.jpg' width='100%' height='100%'></td> 
10       </tr>
11       <tr>
12         <td  align='left' width='50%' colspan='2'><img src='pack_map/8.jpg' width='100%' height='100%'></td>
13         <td  align='left' width='30%'  ><img src='pack_map/7.jpg' width='100%' height='100%'></td>
14      </tr>
15      <tr>
16         <td  id="td_4" align='left' width='60%' height='20%' ><img src='pack_map/3.jpg' width='100%' height='100%'></td>
17         <td  id="td_5" align='left' width='13%' ><img src='pack_map/6.jpg' width='100%' height='100%'></td>
18         <td  id="td_6" align='left' width='30%' ><img src='pack_map/3.png' width='100%' height='100%'></td>
19      </tr>
20  </table>

第二种

代码语言:javascript
复制
1 var tabl = document.getElementById("tabl").rows[0].cells[0].offsetWidth;

这种是可以特定的找到第几行,第几列的宽。

上面说的只是宽,对于其他属性,颜色,高度,等等,都可以用这种方法获取。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2014-11-29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档