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

简介: 这个比较简单,总体思想,标签标记一个id,js获取id,就能用它的属性了。介绍两种方法。请看下面代码。   第一种 1 2 3 function width_table_all() { 4 7 var tabl = document.getElementById("tabl").offsetWidth; 8 alert(tabl); 11 }183 这个是js的函数,offsetWidth是一个属性。

这个比较简单,总体思想,标签标记一个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;

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

 

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

如果您认为这篇文章还不错或者有所收获,您可以通过扫描一下下面的支付宝二维码 打赏我一杯咖啡【物质支持】,也可以点击右下角的【推荐】按钮【精神支持】,因为这两种支持都是我继续写作,分享的最大动力


img_12e3f54d4d0f70f0eb14f20548e3d781.png
目录
相关文章
|
前端开发 JavaScript
前端基础 - JavaScript修改标签样式的属性值
前端基础 - JavaScript修改标签样式的属性值
252 0
|
JavaScript 前端开发 Windows
VScode的注释和标题,标签,img的src属性(如何网页上插入图片)(Mac如何开启js控制台)(如何免费复制网页中的文字)
VScode的注释和标题,标签,img的src属性(如何网页上插入图片)(Mac如何开启js控制台)(如何免费复制网页中的文字)
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
1298 0
|
JavaScript
vue + d3.js(v6) 绘制【树状图/思维导图】可折叠/展开,可点击跳转,可带标签
vue + d3.js(v6) 绘制【树状图/思维导图】可折叠/展开,可点击跳转,可带标签
2081 1
|
JavaScript 前端开发
js的input标签上传图片并转为base64预览
js的input标签上传图片并转为base64预览
494 0
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
293 0
|
JavaScript 前端开发 UED
探究: 为什么JavaScript要在body标签尾部引入?
探究: 为什么JavaScript要在body标签尾部引入?
316 0
|
JavaScript
js遍历Table
js遍历Table
158 0
|
Web App开发 JavaScript
js控制隐藏或显示table的某一行
js控制隐藏或显示table的某一行
231 0