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

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

第二种情况就是宽和高是写在行内中，比如style="width:120px;"，这中情况通过上述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; //宽度

以上这篇js获取Html元素的实际宽度高度的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript 控制 html元素 显示/隐藏实现代码

    1.编写js函数 <script type="text/javascript"> function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";} function $(s){return document.getElementById(s);} </script> 2. 要显示/隐藏的html元素加上 id

  • JS实现加载时锁定HTML页面元素的方法

    本文实例讲述了JS实现加载时锁定HTML页面元素的方法.分享给大家供大家参考,具体如下: 在html加载时js锁定页面内所有input,textarea,select  具体js如下 index.js for(z=0;z<document.getElementsByTagName('input').length;z++) { document.getElementsByTagName('input')[z].setAttribute('disabled','disabled') } for(zz

  • JS控制HTML元素的显示和隐藏的两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementById("EleId").style.visibility="hidden"; document.getElementById("EleId").style.visibility="visible"; 利用上述方法实现隐藏后,页面

  • js实现创建删除html元素小结

    如果我要创建一个div元素. 1.使用DOM对象创建: 使用document.createElement('div')方法创建元素. 2.使用JQuery创建: 使用$('<div>通过JQuery创建的新元素</div>')的方法直接创建元素. 如果需要将id是'div2js'的div元素删除. 1.使用DOM对象 首先需要找到被删元素的父元素,通过父元素将其需要删除的子元素删除. var el = document.getElementById('div2js'); el.pa

  • Javascript createElement和innerHTML增加页面元素的性能对比

    最近遇到js的效率问题,是关于在页面中新增元素的问题. 假设我们有页面如下: 复制代码 代码如下: <HTML> <HEAD> </HEAD> <BODY> <div id="div1"></div> </BODY> <script> // 脚本位置 </script> </HTML> 现在,我们要往div1中添加对象,大家都知道在为web页面增加一个元素时可以使用如

  • JavaScript动态改变HTML页面元素例如添加或删除

    可以通过JavaScript动态的改变HTML中的元素 向HTML中添加元素 首先需要创建一个标签,然后向该标签中添加相应的内容,然后将创建好的标签添加到相应的位置. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht

  • JS获取html元素的标记名实现方法

    常见的获取元素的方法有3种,分别是通过元素ID.通过标签名字和通过类名字来获取. getElementById DOM提供了一个名为getElementById的方法,这个方法将返回一个与之对应id属性的节点对象.使用的时候请注意区分大小写. 它是document对象特有的函数,只能通过其来调用该方法.其使用的方法如下: document.getElementById('demo') //demo是元素对应的ID 该方法兼容主流浏览器,甚至包括IE6+,可以大胆使用. getElementsBy

  • JavaScript改变HTML元素的样式改变CSS及元素属性

    改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法: 复制代码 代码如下: document.getElementById(id).style.property=new style <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color="blue"; </script> JS改变

  • JavaScript中获取HTML元素值的三种方法

    JavaScript中取得元素的方法有三种:分别是: 1.getElementById() 方法:通过id取得HTML元素. 2.getElementsByName()方法:通过name取得元素,是一个数组. 3.getElementsByTagName()方法:通过HTML标签取得元素,是一个数组. 如果要取得值可以使用value,如:var x=document.getElementById("id").value; 方法一:getElementById() 方法 可返回对拥有指定

  • js 动态创建 html元素

    js学习之动态创建html元素 body{margin:0;padding:0;} .sky{background:#000;width:1000;height:500px; position:relative;} #s{ background:#FFF; width:1px; height:1px; overflow:hidden; position:absolute;} 没事造星星玩 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • Js 获取HTML DOM节点元素的方法小结

    如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过)1. 通过顶层document节点获取:          (1) document.getElementById(elementId) :该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点.             如今,已经出现了如proto

随机推荐