您现在的位置:首页 --> JavaScript --> javascript获取隐藏dom的宽高
javascript获取隐藏dom的宽高
浏览:1901次 出处信息
一个隐藏的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));
还有其他更好的方法欢迎提出来。
建议继续学习:
- PHP Simple HTML DOM Parser 是一个不错的html/xml分析类 (阅读:5755)
- phpQuery:像jQuery一样处理DOM (阅读:3283)
- 仅100行的JavaScript DOM操作类库 (阅读:3258)
- 对大量子节点DOM操作的最佳实践方式 (阅读:3099)
- 获取Dom元素的X/Y坐标 (阅读:2801)
- DOM元素上jQuery事件几点学习 (阅读:2375)
- JS操作iframe里的dom (阅读:2333)
- React入门:关于虚拟DOM(Virtual DOM) (阅读:2296)
- DOM Storage全解析 (阅读:2217)
- 页面DOM加载顺序和用户视觉浏览顺序的一致性 (阅读:2205)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
后一篇:Javascript模板引擎分享 >>
文章信息
- 作者:断桥残雪 来源: 断桥残雪部落格
- 标签: dom 宽高
- 发布时间:2011-10-14 14:01:24
建议继续学习
近3天十大热文
- [11] 逃出你的肖申克(五):看不见的牢笼(上)
- [9] 产品设计之QQ邮箱登录页与淘宝登录页
- [9] [Perl]Moose::Manual::T
- [8] 怎样获取PHP变量的变量名之PHP实现
- [8] SNS背后的科学(1)从六度分隔到无尺度网络
- [8] 实现一个更精简的Tab
- [8] mysqldump意外终止的原因以及解决方法
- [8] 分布式系统的事务处理
- [8] 社交网络语法:关于“Checkin”
- [8] iOS的定位原理揭秘