下面小编就为大家带来一篇 js 获取隐藏元素宽高的实现方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
网上有一些 js 获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了。
例如:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
- <title>
- test
- </title>
- </head>
- <body>
- <div id="test" style="display:none">
- 我有一壶酒,足以慰风尘。尽倾江海里,赠饮天下人。
- </div>
- <div id="test2" style="display:none">
- <div style="display:none">
- <div id="test2_child">
- 我有一壶酒,足以慰风尘。尽倾江海里,赠饮天下人。
- </div>
- </div>
- </div>
- <div id="test3">
- <div>
- <div id="test3_child">
- 我有一壶酒,足以慰风尘。尽倾江海里,赠饮天下人。
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
test 获取得了,但是 test2_child 是获取不到的。鉴于这种情况,于是自己写了一个方法解决。
解决思路:
1. 获取元素(拿宽高那个)所有隐藏的祖先元素直到 body 元素,包括自己。
2. 获取所有隐藏元素的 style 的 display、visibility 属性,保存下来。
3. 设置所有隐藏元素为 visibility:hidden;display:block !important;(之所以要 important 是避免优先级不够)。
4. 获取元素(拿宽高那个)的宽高。
5. 恢复所有隐藏元素的 style 的 display、visibility 属性。
6. 返回元素宽高值。
代码实现:
- function getSize(id){
- var width,
- height,
- elem = document.getElementById(id),
- noneNodes = [],
- nodeStyle = [];
- getNoneNode(elem); //获取多层display:none;的元素
- setNodeStyle();
- width = elem.clientWidth;
- height = elem.clientHeight;
- resumeNodeStyle();
- return {
- width : width,
- height : height
- }
- function getNoneNode(node){
- var display = getStyles(node).getPropertyValue('display'),
- tagName = node.nodeName.toLowerCase();
- if(display != 'none'
- && tagName != 'body'){
- getNoneNode(node.parentNode);
- } else {
- noneNodes.push(node);
- if(tagName != 'body')
- getNoneNode(node.parentNode);
- }
- }
- //这方法才能获取最终是否有display属性设置,不能style.display。
- function getStyles(elem) {
- // Support: IE<=11+, Firefox<=30+ (#15098, #14150)
- // IE throws on elements created in popups
- // FF meanwhile throws on frame elements through "defaultView.getComputedStyle"
- var view = elem.ownerDocument.defaultView;
- if (!view || !view.opener) {
- view = window;
- }
- return view.getComputedStyle(elem);
- };
- function setNodeStyle(){
- var i = 0;
- for(; i < noneNodes.length; i++){
- var visibility = noneNodes[i].style.visibility,
- display = noneNodes[i].style.display,
- style = noneNodes[i].getAttribute("style");
- //覆盖其他display样式
- noneNodes[i].setAttribute("style", "visibility:hidden;display:block !important;" + style);
- nodeStyle[i] = {
- visibility :visibility,
- display : display
- }
- }
- }
- function resumeNodeStyle(){
- var i = 0;
- for(; i < noneNodes.length; i++){
- noneNodes[i].style.visibility = nodeStyle[i].visibility;
- noneNodes[i].style.display = nodeStyle[i].display;
- }
- }
- }
例子演示:
- var testSize = getSize('test');
- console.log("test-> width:" + testSize.width + " height:" + testSize.height);
- var test2ChildSize2 = getSize('test2_child');
- console.log("test2Child2-> width:" + test2ChildSize2.width + " height:" + test2ChildSize2.height);
- var test3ChildSize = getSize('test3_child');
- console.log("test3_child-> width:" + test3ChildSize.width + " height:" + test3ChildSize.height);
- //打印值如下
- test-> width:417 height:18
- test2Child2-> width:417 height:18
- test3_child-> width:417 height:18
注意事项:
1. 打开显示所有隐藏祖先元素,然后获取元素的宽高值,可能在某些情况下获取值是不正确的。
PS:不过这个不用担心,真正出错时再 hack 方法就行。
2. 之所以要保存隐藏祖先元素 display、visibility 属性,是为了后面可以设置回来,不影响其本身。
3. 另外 getStyles 方法是从 jquery 源码中摘取出来,这方法才能获取最终是否有 display 属性设置。
PS:不能从 style.display 获取。
以上这篇 js 获取隐藏元素宽高的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0225/265644.html