如何用 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;
这种是可以特定的找到第几行,第几列的宽。
上面说的只是宽,对于其他属性,颜色,高度,等等,都可以用这种方法获取。
我的“区块链”技术书籍:《区块链以太坊DApp开发实战》
、
支付宝收款码 https://www.cnblogs.com/linguanh/gallery/825997.html
微信:https://www.cnblogs.com/linguanh/gallery/image/321906.html
银行卡:6217007200076746554 , 林冠宏
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?