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

一个隐藏的DOM是获取不到宽高的,如果想要获取,采用下面的方法:
 

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

复制代码 代码如下:

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));
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));

还有其他更好的方法欢迎提出来。

时间: 2024-09-21 08:32:16

javascript获取隐藏dom的宽高 具体实现的相关文章

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

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

Android 获取屏幕的多种宽高信息的示例代码

本文主要介绍了Android 获取屏幕的多种宽高信息的示例代码,分享给大家,具体如下: 包含的宽高信息如下图所示: 在模拟器上获取到的数据: 08-26 07:19:32.712 7834-7834/com.czy.screeninfo E/MainActivity: getTotalScreenHeight 1920 08-26 07:19:33.505 7834-7834/com.czy.screeninfo E/MainActivity: getScreenWidth 1080 08-26

求java获取本地flash文件宽高数据

问题描述 在本地有一个swf文件,我现在想用java代码获取这个swf的宽高值,在网上只找到一个源码,还运行报错,求大神 解决方案 解决方案二:你看一下这个就了解了.分析一下swf文件的文件头信息即可.文件头中有帧尺寸应该就是大小.解决方案三:给你源码!http://www.iteye.com/topic/348529测试可用!解决方案四:引用1楼rumlee的回复: 你看一下这个就了解了.分析一下swf文件的文件头信息即可.文件头中有帧尺寸应该就是大小. 就是用的这个,CWS解压的时候出现内存

Android利用Glide获取图片真正的宽高的实例

前言 有时候需要获取网络图片的宽高来设置图片显示的大小,很多人会直接利用Glide的加载监听去拿图片的宽高,但是这样拿到的不是图片真正的宽高,而是图片显示在ImageView后的宽高.如下: //获取图片显示在ImageView后的宽高 Glide.with(this) .load(imgUrl) .asBitmap()//强制Glide返回一个Bitmap对象 .listener(new RequestListener<String, Bitmap>() { @Override public

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

js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法: 复制代码 代码如下: function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象.样式特性 return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];} 但是如果这个元素是隐藏(dis

JavaScript获取HTML DOM节点元素的方法的总结

         在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过):        1. 通过顶层document节点获取:            (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要

Android开发获取手机的屏幕宽高,density值,px 宽高,dp 的宽高,及px 和dp互转

直接贴代码 tvModel.setText(android.os.Build.MODEL);//手机型号 // 获取屏幕密度(方法1) int screenWidth1 = getActivity().getWindowManager().getDefaultDisplay().getWidth();       // 屏幕宽(像素,如:480px) int screenHeight1 = getActivity().getWindowManager().getDefaultDisplay().

js获取隐藏元素宽高的实现方法_javascript技巧

网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo

js获取隐藏元素宽高的方法

网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo