如何用 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 条评论
登录 后参与评论

相关文章

来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

1940
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4788
来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4044
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

25210
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2605
来自专栏跟着阿笨一起玩NET

c#实现打印功能

2592
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

3945
来自专栏魂祭心

原 canvas绘制clock

3964
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5247

扫码关注云+社区