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

第一种情况就是宽高都写在样式表里,就比如#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元素的实际宽度高度的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
javascript 元素宽度、javascript 元素高度、js 获取元素高度宽度、javascript 屏幕宽度、javascript 获取宽度,以便于您获取更多的相关知识。

时间: 2024-10-29 15:00:39

js获取Html元素的实际宽度高度的方法_javascript技巧的相关文章

Js 获取、判断浏览器版本信息的简单方法_javascript技巧

Navigator 对象包含有关浏览器的信息: •appCodeName -- 浏览器代码名的字符串表示 •appName -- 官方浏览器名的字符串表示 •appVersion -- 浏览器版本信息的字符串表示 •cookieEnabled -- 如果启用cookie返回true,否则返回false •javaEnabled -- 如果启用java返回true,否则返回false •platform -- 浏览器所在计算机平台的字符串表示 •plugins -- 安装在浏览器中的插件数组 •t

JS获取子窗口中返回的数据实现方法_javascript技巧

在开发的时候,遇到了这样一个问题,客户填写自己的收货地址,可以新建,但同时也可以选择之前填写的,由于我们的客户本身就是商户,地址繁多,把它之前的地址简单用个下拉框罗列出来显然不合适,并且客户要求能够对地址通过姓名筛选,这样,选择地址就必须再开一个小窗来完成了,那么,小窗中填写的值怎么回传呢? js有个方法showModalDialog在这种情况下用的就比较多了,其作用是打开一个模态窗口,什么事模态窗口?就是打开后不能操作父窗口,只有子窗口操作完了,关闭了,才可以继续父窗口的动作.回到最开始的问题

js获取会话框prompt的返回值的方法_javascript技巧

本文实例讲述了js获取会话框prompt的返回值的方法.分享给大家供大家参考.具体分析如下: 获取会话框prompt的返回值,见例子: 复制代码 代码如下: <html> <head> <script type="text/javascript"> if(prompt("请输入密码","") == "admin"){  document.write("密码正确"); }e

JS获取字符串实际长度(包含汉字)的简单方法_javascript技巧

方法一: var jmz = {}; jmz.GetLength = function(str) { ///<summary>获得字符串实际长度,中文2,英文1</summary> ///<param name="str">要获得长度的字符串</param> var realLength = 0, len = str.length, charCode = -1; for (var i = 0; i < len; i++) { cha

js 获取当前web应用的上下文路径实现方法_javascript技巧

js 获取当前web应用的上下文路径实现方法 //js webcontext var webroot=document.location.href; webroot=webroot.substring(webroot.indexOf('//')+2,webroot.length); webroot=webroot.substring(webroot.indexOf('/')+1,webroot.length); webroot=webroot.substring(0,webroot.indexO

js获取form表单所有数据的简单方法_javascript技巧

在HTML中用js获取通过GET.POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值. 针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为公用方法直接调用.可以提高大家的开发效率. Js代码 <script type="text/javascript"> //获取指定form中的所有的<input>对象 function getElements(formId) { var form = documen

JS获取计算机mac地址以及IP的实现方法_javascript技巧

JS获取计算机mac地址以及IP的实现方法 复制代码 代码如下: //这两个是系统里的ActiveX插件   用来获取ip以及物理地址 <OBJECT   id=locator   classid=CLSID:76A64158-CB41-11D1-8B02-00600806D9B6   VIEWASTEXT> </OBJECT> <OBJECT   id=foo   classid=CLSID:75718C9A-F029-11d1-A1AC-00C04FB6C223>

JS获取数组最大值、最小值及长度的方法_javascript技巧

本文实例讲述了JS获取数组最大值.最小值及长度的方法.分享给大家供大家参考,具体如下: //最小值 Array.prototype.min = function() { var min = this[0]; var len = this.length; for (var i = 1; i < len; i++){ if (this[i] < min){ min = this[i]; } } return min; } //最大值 Array.prototype.max = function()

JS 获取HTML标签内的子节点的方法_javascript技巧

子节点的个数: document.getElementById("id").childNodes.length 注意: 标签开/闭合算2个节点 第几个子几点: document.getElementById("id").childNodes[n] 示例: 这里是 length-4 处,margin-left:20px 输出:length=8 实例: <div id="page_kx" style="text-align: cent