js获取Html元素的实际宽度高度

情况一:宽高都写在样式表里,即外部样式或嵌入式样式,比如#div1{width:120px;}。这种情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。

情况二:宽和高是写在行内中,即内联式样式,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度。

因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。

代码:
var $ = document.getElementById("view");
var h = $.offsetHeight;  //高度
var w = $.offsetWidth;  //宽度

现在的前端制作很少直接把样式写style里了,都是写在样式表里。如果你要获取的样式没有相对应(即#div1.style.width与#div1.offsetWidth的值不等,因为offset计算时包括padding和border),就只能分别针对不用浏览器来获取样式表的属性了,方法如下:

//ie8及以前版本:通过currentStyle

alert(document.getElementById(‘id‘).currentStyle.width);

//ff,safari,opera,chrome,ie9及之后版本:通过window.getComputedStyle

var el=document.getElementById(‘id‘);

alert(window.getComputedStyle(el,null).width);

附录:样式分类 
外部样式 External Style Sheet 
以CSS为扩展名的文件(又称为"超文本样式表"文件),它的作用范围可以是多张网页,或整个网站,甚至不同的网站。与网页链接后,才能应用。 
嵌入式样式 internal Style Sheet (<style></style>)
包含在网页内部的样式设置,它的作用范围仅限于嵌入的网页。 
内联式样式 inline Style 
在HTML文档中,内联式样式表的格式化信息直接插入所应用的网页元素的HTML标签中,作为其HTML标签的属性参数。严格地说,内联样式表称不上表,仅仅是一条HTML标记。 
当出现相同的样式时,优先级是内联大于嵌入式样式, 嵌入式样式大于外部样式。

时间: 2024-07-29 05:50:13

js获取Html元素的实际宽度高度的相关文章

[JavaScript] js获取Html元素的实际宽度高度

第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通 过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第二种情况就是宽和高是写在行内中,比如,这中情况通过 上述2个方法都能拿到宽度. 小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以 我们获取元素宽和高的时候最好用这2个属性.注意如果不是写在行内style中的 属性都不能通过id.style.at

原生js获取Html元素的实际宽度高度

第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度. 小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性.注意如果不是写在行内styl

js 获取整个屏幕的可用宽度和可用高度

screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏. screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏. -------------------------------------------完整的例子------------------------------------------- <!DOCTYPE html> <html> <body> <script

js获取隐藏元素宽高的方法

网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo

js获取html元素? js里&quot;==&quot;和&quot;===&quot;区别?

现在的我的cpu又添加一项进程,那就是javaScript. 一.js获取html元素常用的方法: js获取html元素常用的方法有: 1)var obj = document.getElementById("#id");非常常用是通过Id来获取页面元素的. 2) var obj = document.getElementsByTagName("element");这个是通过html页面标签来获取元素的.在一个页面中相同的标签会出现很多次,如何能定位到自己想要的呢?

js获取页面元素位置函数(跨浏览器)

function getElementPos(elementId) { var ua = navigator.userAgent.toLowerCase(); var isOpera = (ua.indexOf('opera') != -1); var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof var el = document.getElementById(elementId); if(el.par

JS获取DOM元素的八种方法

什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.我们用JavaScript对网页进行的所有操作都是通过DOM进行的. 这篇文章不做深入研究,只把各种用法和坑做一个总结. JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getE

JavaScript获取html元素的实际宽度和高度

一.JavaScript获取html元素宽高 1.宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度.2.宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度. 小结,由于clientWidth和offsetWidth 无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性.注意如果不是写在

js获取页面元素距离浏览器工作区顶端的距离

先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)        document.documentElement.scrollTop //firefox (javascript)        document.documentElement.scrollLeft //firefox (javascript)        document.body.scro