一个隐藏的DOM是获取不到宽高的,如果想要获取,采用下面的方法:
首先clone一个DOM,设置position:absolute,然后设置top为一个比较大的负值,然后使其显示出来,最后获取到了DOM的宽高后,将其remove。
具体代码如下:
function getCss(elem, css){
if (window.getComputedStyle) {
return window.getComputedStyle(elem, null)[css];
}else if (elem.currentStyle) {
return elem.currentStyle[css];
}else {
return elem.style[css];
}
}
function getWH(dom){
var get = function(elem){
var wh = {};
'Width Height'.replace(/[^ ]+/g, function(i){
var a = i.toLowerCase();
wh[a] = elem['offset' + i] || elem['client' + i];
});
return wh;
};
if (getCss(dom, 'display') === 'none') {
var nDom = dom.cloneNode(true);
nDom.style.position = 'absolute';
nDom.style.top = '-3000px';
nDom.style.display = 'block';
document.getElementsByTagName('body')[0].appendChild(nDom);
var wh = get(nDom);
nDom.parentNode.removeChild(nDom);
return wh;
}
return get(dom);
}
//test
console.log(getWH(document.getElementById('content')));
var domA = document.createElement("a"), _ostyle = "position:absolute;z-index:999999;width:92px;height:22px;position:absolute;display:none;";
domA.setAttribute("style", _ostyle);
domA.style.cssText = _ostyle;
domA.setAttribute("href", "javascript:void(0);");
document.getElementsByTagName('body')[0].appendChild(o);
console.log(getWH(domA));
还有其他更好的方法欢迎提出来。
原文地址:http://blogread.cn/it/article.php?id=4492&f=sinat
分享到:
相关推荐
首先clone一个DOM,设置position:absolute,然后设置top为一个比较大的负值,然后使其显示出来,最后获取到了DOM的宽高后,将其remove。具体代码如下:Js代码 代码如下:function getCss(elem, css){ if (window....
js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法: 代码如下:function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性 return obj.currentStyle...
隐藏/显示 DOM 节点的小实用程序 介绍 长、图片重、页面是浏览器杀手,尤其是在移动设备上。 加载足够的图像,您的浏览器就会崩溃。 此实用程序的灵感来自“技术 #3:删除页面”。 我不知道他们实际上做了什么,但...
14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...
14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...
12.7.2 控制DOM元素的显示与隐藏 12.7.3 改变颜色和大小--一个简单有趣的例子 12.7.4 改变位置--创建一个绕圆圈旋转的文字 12.7.5 编辑控制及其范例 12.7.6 改变样式及其范例 12.7.7 改变行为...
整理的10大JavaScript函数,prototype的$函数,隐藏、显示元素函数,通过className获取DOM元素函数
我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏。使用JavaScript方法实现我们需要用的知识有: 1)JS事件:onmouseover鼠标经过事件和onmouseout鼠标离开事件。 2)JS基础语法:使用function关键字定义函数。 ...
实例055 获取文本框/编辑框/隐藏域的值 96 实例056 自动计算金额 97 实例057 设置文本框的只读属性 98 实例058 限制多行文本域输入的字符个数 100 实例059 自动选择文本框/编辑框中的文字 102 实例060 按下回车键时...
实例350 使用XML DOM对象读取XML文件 554 实例351 使用XMLHttpRequest对象读取XML文件 557 14.2 显示XML文档 559 实例352 使用CSS显示XML文档 559 实例353 使用XSL显示XML文档 562 实例354 使用IE XML...
第一部分 JavaScript入门 1 第1章 编写第一个JavaScript程序 1 1.1 编程简介 1 什么是计算机程序 2 1.2 如何把JavaScript添加到页面 3 外部JavaScript文件 5 1.3 第一个JavaScript程序 7 1.4 把文本写到Web页面上 9 ...
当然总高度的计算必须是文字所在的 DOM 没有对高度的限制,随着文本的增加 DOM 要随之变高才行;最后还要考虑 DOM 的样式padding和margin对高度的影响。这样一来我们就可以计算出文本的行数了。总结一下我们需要如下...
1.2.2 DOM..............................................5 1.2.3 BOM..............................................8 1.3 小结..............................................8 第 2 章 ECMAScript 基础..........
JavaScript:定义行为和动作 (基于对象和事件驱动的客户端脚本语言;也是一种广泛应用于客户端Web开发的脚本语言) 基于对象:网页中的一切元素都是假象!不需要new,即可直接使用 事件驱动:JavaScript的执行都是...
30.2.htm JavaScript检测 30.3.htm 获取浏览器窗口大小 30.4.htm 设置屏幕对象的尺寸 30.5.htm 有选择地显示图片 30.6.htm 简单的性能检测 30.7.htm 模拟...
用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确的定位,这些请看后面的程序说明。 程序说明 【克隆table】 克隆一个元素用cloneNode就可以了,它有一个bool参数,表示克隆是否包含子节点...
您将从表单中获取信息,并使用它来完成对象数组,然后将这些对象附加回DOM。 听起来可能不算很多,但是有很多相互依赖的活动作品。 在开始开发之前,您需要计划要完成的逻辑。 如果您发现此过程很快,那么可以添加...
正面截图 该库捆绑 进入没有依赖性的库中,该库可以将SVG元素转换为图像或Canvas元素,并获取页面或页面部分的屏幕截图,即使它们由于诸如CSS滚动,隐藏或自动之类CSS属性而被隐藏。为什么? 基本上,因为图表库...