专栏首页林冠宏的技术文章如何用 js 获取table 或者其他块状标签的 宽和高

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

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

第一种

  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

 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>

第二种

1 var tabl = document.getElementById("tabl").rows[0].cells[0].offsetWidth;

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • android 布局 使用 viewPager 时,如何解决 和 子页面 长按滑动 冲突问题

    使用 viewPager 时,如何解决 和 子页面 长按滑动 冲突问题。 我的问题原型:      这个问题,我相信遇到的人会比较少,我是在 一个 viewPa...

    林冠宏-指尖下的幽灵
  • 分享个 之前写好的 android 文件流缓存类,专门处理 ArrayList、bean。

    转载麻烦声明出处:https://cloud.tencent.com/developer/user/1148436/activities 目录:   1,前序 ...

    林冠宏-指尖下的幽灵
  • 关于 android 的 view.getLeft(), getRight(), getTop(), getBottom() 的一些疑惑(坑)解答

    (原创) 今天在做下滑刷新的时候碰到 view 的四个 get 函数有点特别,具体遇到的问题如下,经反复测试和查找资料,填坑如下: 1,为什么我有时候在使用ge...

    林冠宏-指尖下的幽灵
  • flask第二十九篇——一个例子+【更新内容通知】

    用户2149234
  • vue学习笔记2

    概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在...

    用户6362579
  • 针对B2B的多触点归因追踪分析平台——Proof介绍

    译者注:   国内已经开始有专门针对营销渠道归因的分析平台(例如目标科技),而美国人在这一块做的更多,已经有数个相当高质量的专门归因分析的工具问世。Proof是...

    iCDO互联网数据官
  • Java Web 网络留言板2 JDBC数据源 (连接池技术)

    Hongten
  • vSLAM开发指南:从技术框架、开源算法到硬件选型!

    出品 | 智东西公开课 讲师 | 小觅智能 CTO 杨瑞翾 编辑 | 王鑫

    小白学视觉
  • 深度学习、机器学习图像/人脸/字幕/自动驾驶数据集(Dataset)汇总

    1. CIFAR-10 & CIFAR-100 CIFAR-10包含10个类别,50,000个训练图像,彩色图像大小:32x32,10,000个测试图像...

    机器学习AI算法工程
  • 渗透测试中利用基于时间差反馈的远程代码执行漏洞(Timed Based RCE)进行数据获取

    在最近的渗透测试项目中,为了进一步验证漏洞的可用性和危害性,我们遇到了这样一种情形:构造基于时间差反馈的系统注入命令(OS command injection ...

    FB客服

扫码关注云+社区

领取腾讯云代金券