第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}。这中情况通

过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。

第二种情况就是宽和高是写在行内中,比如,这中情况通过

上述2个方法都能拿到宽度。

小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以

我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的

属性都不能通过id.style.atrr来获取。

现 在的前端制作很少直接把样式写style里了,都是写在样式表里。如果你要获取

的样式没有相对应的(就像#div1.style.width对 应#div1.offsetWidth),就只

能分别针对不用浏览器来获取样式表的属性了,可以试着搜索“JS 获取样式属

性”之类的。

var o = document.getElementById("view");
var h = o.offsetHeight;  //高度
var w = o.offsetWidth;  //宽度

[JavaScript] js获取Html元素的实际宽度高度的更多相关文章

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

    第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...

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

    第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...

  3. javascript js获取html元素各种距离方法

    //滚动条 scrollLeft//滚动条距左边距离 scrollTop//滚动条距顶部距离 scrollWidth//滚动条元素的宽 scrollHeight//滚动条元素的高 //可视范围 cli ...

  4. js获取浏览器body或窗宽度高度合集

    <script type="text/javascript"> var s = " "; document.documentElement.scro ...

  5. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  6. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  7. javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

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

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  9. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

随机推荐

  1. 我终于理解了LISP『代码即数据|数据即代码』的含义

    以前我一直不能理解LISP里引用的作用,感觉引用和字符串没什么区别.比如:> (define (func)     'ok) > (func) 'ok 这里把引用ok当做了函数func的返 ...

  2. 中国地图投影(实现Lambert投影)

    一.简介 目前Web地图已经是一个非常普遍的应用,百度地图,高德地图等等极大的方便了我们的生活和学习.本项目主要是在Web完成一个简单的中国地图的绘制,实现Lambert投影. 二.制图源数据信息及来 ...

  3. jQuery-对Select的操作

    语法解释: $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkTex ...

  4. spring的依赖注入的最常见的两种方法

    package com.lsz.spring.action; public class User { /** * set注入 */ private String username; public vo ...

  5. DevExpress的 ASPxGridview控件的自动配置效果

    [淘宝小店:http://shop107919332.taobao.com ] 软件运行界面.是不是很漂亮? 这里是系统配置页面,可以随时根据需要配置每张表的每个字段的显示顺序,可见与否,只读与否,编 ...

  6. php文件上传限制

    PHP默认的上传限定是最大2M,想上传超过此设定的文件,需要调整PHP.apache等的一些参数.下面,我们简要介绍一下PHP文件上传涉及到的一些参数: file_uploads :是否允许通过HTT ...

  7. ###STL学习--函数对象

    点击查看Evernote原文. #@author: gr #@date: 2014-08-13 #@email: forgerui@gmail.com 在stl中,函数对象被大量地使用,用以提高代码的 ...

  8. html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。

    html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...

  9. js事件冒泡和事件委托

    js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...

  10. [PR & ML 6] [Introduction] Information Theory