`

javascript获取隐藏dom的宽高【转】

阅读更多

 

一个隐藏的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

 

 

 

分享到:
评论

相关推荐

    javascript获取隐藏dom的宽高 具体实现

    首先clone一个DOM,设置position:absolute,然后设置top为一个比较大的负值,然后使其显示出来,最后获取到了DOM的宽高后,将其remove。具体代码如下:Js代码 代码如下:function getCss(elem, css){ if (window....

    javascript获取隐藏元素(display:none)的高度和宽度的方法

    例如,以下是一个使用jQuery库的JavaScript函数,用以获取隐藏元素的尺寸: ```javascript function getDefaultStyle(obj, attribute) { return obj.currentStyle ? obj.currentStyle[attribute] : document....

    javascript获取隐藏元素(display-none)的高度和宽度的方法.docx

    ### JavaScript 获取隐藏元素 (display: none) 的高度和宽度的方法 #### 一、问题背景与需求分析 在前端开发过程中,经常会遇到需要获取隐藏元素尺寸的情况。这些元素可能因为某些逻辑原因被设置为 `display: none...

    JQ 获取图片真实宽高

    "JQ 获取图片真实宽高"这个标题指的是使用jQuery来获取图片在页面加载完成后的真实宽度和高度,因为图片在未完全加载前,其宽度和高度可能是未知的。下面我们将深入探讨如何实现这一功能,并了解相关的知识点。 1. ...

    JavaScript+DOM编程艺术

    书中会详细介绍如何通过JavaScript获取DOM元素(如getElementById、getElementsByTagname等),添加、删除和修改元素及属性,以及遍历DOM树的方法。 3. **事件处理**:JavaScript与DOM的结合使得能够响应用户的交互...

    JavaScript_——DOM总结.txt

    ### JavaScript DOM 概述 #### 一、DOM (Document Object Model) 介绍 **DOM**,即文档对象模型,是一种与平台和语言无关的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。在 Web 开发中,DOM ...

    JavaScript DOM 编程艺术1

    书中通过创建JavaScript图片库的实例,展示了如何使用JavaScript和DOM来实现动态效果,如图片的显示和隐藏,以及如何扩展功能以适应不同的需求。 6. 最佳实践: - 平稳退化:确保即使JavaScript不工作,页面仍能...

    JavaScript DOM 编程艺术 Best Practices

    JavaScript DOM(Document Object Model)编程艺术是一门技术,它涉及使用JavaScript语言来操作网页的结构、内容和样式。DOM是HTML和XML文档的一种标准表示,它将文档视为一系列可交互的对象。在这本名为"Best ...

    JavaScript_DOM.doc

    DOM将网页结构转换为一个树形结构,使得开发者可以通过JavaScript等脚本语言来操作文档中的元素、属性和内容。在DOM中,每个HTML标签都被表示为一个对象,如`window`、`document`、`body`、`forms`等,这些对象之间...

    JavaScript实现隐藏菜单

    JavaScript是一种广泛应用于网页和网络应用的编程语言,尤其在实现动态交互方面有着不可或缺的作用。...同时,通过学习和实践这样的小项目,可以进一步加深对JavaScript事件处理、DOM操作和CSS样式的理解。

    常用web开发手册css2/css3/jquery-api/javascript api/dom/html/j2ee-api/dhtml

    JavaScript API是JavaScript语言在浏览器环境下的扩展,提供了访问和操作DOM、处理用户交互、进行Ajax通信等功能。例如,Document对象的getElementById()用于获取ID为特定值的元素,Event对象提供了事件处理相关的...

    第三章:javascript-DOM对象模型-补充课件.ppt

    JavaScript DOM对象模型是Web开发中不可或缺的一部分,它允许开发者通过编程方式操纵网页的结构、内容和样式。在JavaScript中,DOM被用作一种接口,使我们能够读取、修改、添加或删除HTML、XML文档的各个部分。DOM将...

    基于JavaScript、CSS和DOM的页面动态效果实现.zip

    3. **动态加载内容**:使用AJAX(Asynchronous JavaScript and XML)技术,通过JavaScript向服务器发送异步请求,获取新数据后,通过DOM操作将这些数据动态展示到页面上。 4. **用户交互反馈**:当用户点击按钮时,...

    JavaScript DOM 编程艺术 The Image Gallery Revisited

    《JavaScript DOM 编程艺术:The Image Gallery Revisited》是一个深入探讨如何使用JavaScript与DOM(文档对象模型)进行交互,特别是在构建图像画廊应用中的实践教程。在这个话题中,我们将聚焦于JavaScript在网页...

    JavaScript Validation API with DOM.zip

    在表单验证的上下文中,DOM帮助我们获取和修改表单元素,显示或隐藏错误信息。例如,我们可以使用`document.querySelector()`或`document.getElementById()`来获取特定的输入元素,然后通过`.validity`属性检查其...

    【JavaScript】DOM实战练习之选项卡切换

    6. **DOM遍历**: 有时我们需要根据当前选中的选项卡来更新其他元素的状态,这可能涉及到DOM遍历,如`previousElementSibling` 和 `nextElementSibling` 来获取相邻元素,或者`parentNode` 和 `childNodes` 来上下...

    教你一天玩转JavaScript(四)——使用JavaScript实现定时弹出广告定时隐藏广告

    为了在JavaScript中显示和隐藏广告,我们需要对DOM进行操作。通常,我们可以改变广告元素的`style.display`属性。例如,`display:none`隐藏元素,`display:block`显示元素。 7. **防闪烁策略**: 为了避免广告在...

Global site tag (gtag.js) - Google Analytics