JavaScript获取html元素的实际宽度和高度
一、JavaScript获取html元素宽高
1.宽高都写在样式表里,就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。
2.宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度。
小结,由于clientWidth和offsetWidth 无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过i**.style.atrr来获取。
现在的前端制作很少直接把样式写style里了,都是写在样式表里。如果你要获取的样式没有相对应的(就像#div1.style.width对 应#div1.offsetWidth),就只能分别针对不用浏览器来获取样式表的属性了,可以试着搜索“JS 获取样式属性”之类的。
代码:
var o = document.getElementById("view");
var h = o.offsetHeight; //高度
var w = o.offsetWidth; //宽度
二、width、clientWidth、offsetWidth 之间的关系
width是html元素的内容宽度
clientWidth = width + padding
offsetWidth = width + padding + border
JavaScript获取html元素的实际宽度和高度的更多相关文章
- JavaScript获取屏幕和页面的宽度和高度
JavaScript获取屏幕和页面的宽度和高度 1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- 用javaScript获取页面元素值
用JavaScript获取页面元素常见的三种方法: getElementById() ...
- javascript 获取iframe元素的方法
javascript 获取iframe元素的方法 第一种: $("#IframeID").contents().find("div"); 第二种: $(win ...
- js 获取浏览器显示内容的宽度和高度
js获取浏览器显示内容的宽度和高度 CreateTime--2017年7月10日17:24:12Author:Marydon 1.获取浏览器屏幕显示d的网页宽度 /** * 得到浏览器显示的屏幕高 ...
- 用Javascript获取页面元素的位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...
- Javascript获取页面元素相对和绝对位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...
- jquery 获取元素的 实际宽度和高度
jquery outerHeight方法 outerWidth方法 转: http://www.cnblogs.com/zhja/archive/2012/11/07/2758665.html jqu ...
- JavaScript获取页面元素的常用方法
1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...
- Javascript获取html元素的几种方法
1.通过id获取html元素 <!DOCTYPE html> <html> <head lang="en"> <meta charset= ...
随机推荐
- 关于在链路聚合下做smart,monitor link的转发测试
关于在链路聚合下做smart,monitor link的转发测试 这次又要开始瞎折腾了.没事找事了.毕竟我还是很无聊的: 这个实验主要要涉及到以下几个方面: 1.gvrp的应用: 2.Smart Li ...
- Visual Studio 2015创建ASP.NET5项目“DNX SDK version 'dnx-clr-win-x86.1.0.0-beta5' 无法安装的错误
使用asp.net5建立web application时遇到DNX SDK版本 “dnx-clr-win-x86.1.0.0-beta5”无法安装的错误 解决办法: 运行cmd: 1.输入: @pow ...
- Nginx uWSGI web.py 站点搭建
一.安装nginx 在安装nginx前,需要先装nginx的依赖包. 1.如果没有yum则先安装yum 删除原有的yum rpm -aq|grep yum|xargs rpm -e --node ...
- ECSHOP info: Can't Connect MySQL Server(localhost:3306)!
今天对服务器压力测试后,某个公司电脑的页面显示标题所示,别人电脑正常.故让她清理cookie.无效.重启MySQL后问题解决.
- https单向认证和双向认证区别
关于证书 1.每个人都可以使用一些证书生成工具为自己的站点生成证书(比如jdk的keytool),大家称它为“自签名证书”,但是自己生成的证书是不被互联网承认的,所以浏览器会报安全提示,要求你手动安装 ...
- C各个类型的大小
1个字节(byte)是8bit. 我采用的是64位系统,64位指CPU寄存器的数据宽度是64位的. short 和 int:short比int更节省空间,short占内存是Int的一半,当要考虑程序的 ...
- 爱回收jd图标
http://jd.aihuishou.com/images/icons.png http://misc.360buyimg.com/201007/skin/df/i/bg_hotsale.gif 来 ...
- 常见排序算法-Python实现
常见排序算法-Python实现 python 排序 算法 1.二分法 python 32行 right = length- : ] ): test_list = [,,,,,, ...
- XML和JSON两种数据交换格式的比较
在web开发领域,主要的数据交换格式有XML和JSON,对于在 Ajax开发中,是选择XML还是JSON,一直存在着争议,个人还是比较倾向于JSON的.一般都输出Json不输出xml,原因就是因为 x ...
- VB中的GDI编程-1 设备环境DC
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...