js获取隐藏元素的尺寸

这是test容器,可见容器
这是test容器,可见容器
这是test容器,可见容器
这是test容器,可见容器
这是test容器,
这是test容器,
这是test容器,
这是test容器,
这是test容器,
这是test容器,这是test容器,
这是test容器,
这是test容器,
这是test容器,
这是test容器,
这是test容器,
点我

//判断对象类型

function getType(o){

var _t;

return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase();

}

//获取元素样式

function getStyle(el, styleName) {

return el.style[styleName] ? el.style[styleName] : el.currentStyle ? el.currentStyle[styleName] : window.getComputedStyle(el, null)[styleName];

}

function getStyleNum(el, styleName) {

return parseInt(getStyle(el, styleName).replace(/px|pt|em/ig,''));

}

function setStyle(el, obj){

if (getType(obj) == "object") {

for (s in obj) {

var cssArrt = s.split("-");

for (var i = 1; i < cssArrt.length; i++) {

cssArrt[i] = cssArrt[i].replace(cssArrt[i].charAt(0), cssArrt[i].charAt(0).toUpperCase());

}

var cssArrtnew = cssArrt.join("");

el.style[cssArrtnew] = obj[s];

}

}

else

if (getType(obj) == "string") {

el.style.cssText = obj;

}

}

function getSize(el) {

if (getStyle(el, "display") != "none") {

return { width: el.offsetWidth || getStyleNum(el, "width"), height: el.offsetHeight || getStyleNum(el, "height") };

}

var _addCss = { display: "", position: "absolute", visibility: 'hidden' };

var _oldCss = {};

for (i in _addCss) {

_oldCss[i] = getStyle(el, i);

}

setStyle(el, _addCss);

var _width = el.clientWidth || getStyleNum(el, "width");

var _height = el.clientHeight || getStyleNum(el, "height");

for (i in _oldCss) {

setStyle(el, _oldCss);

}

return { width: _width, height: _height };

}

var dd=document.getElementById("test_display_block");

alert(getSize(dd).height);

document.getElementById("test_display_click").οnclick=function(){

dd.style.display="block";

document.getElementById("test_display_none").style.display="block";

}

alert($("#test_display_none").height());

html中js隐藏div的高度,javascript获取隐藏元素(display:none)的高度和宽度的方法相关推荐

  1. JavaScript 获取一元素的所有子元素

    JavaScript 获取一元素的所有子元素 现有一表格,代码如下: < table  border =1  cellpadding =0  cellspacing =0  width =300 ...

  2. 通过哪些方法可以获取页面的html元素,JavaScript获取页面元素的常用方法详解

    1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...

  3. html js div 内容高度,JavaScript获取div高度并实现高度监听

    demo #demo { width: 100px; height: 200px; background: yellow; margin: 10px; padding: 10px; border: 2 ...

  4. jquery 获取隐藏元素(display:none)的高度和宽度

    下载引入资源文件 <script type="text/javascript" src="path/jquery.min.js"></scri ...

  5. html form提交前md5,javascript实现MD5加密-JavaScript获取HTML元素的三种方...-兼容IE与firefox的js回车提交表单_169IT.COM...

    本文介绍JavaScript获取网页中HTML元素的三种方法,供大家学习参考. 1.getElementById() getElementById()可以访问DOCUMENT中的某一特定元素,顾名思义 ...

  6. 【JAVASCRIPT】javascript获取屏幕,浏览器,网页高度宽度

    网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:document.body.offsetW ...

  7. html显示隐藏域的值,JavaScript获取文本框/编辑框/隐藏域的值

    /p> "http://www.w3.org/TR/html4/loose.dtd"> JavaScript获取文本框/编辑框/隐藏域的值_网页代码站(www.webd ...

  8. html页面查找父节点,Javascript获取父元素parent

    在javascript中,可以使用parent()方法来获取指定元素的父元素.parent()方法返回被选元素的直接父元素.使用parent()方法需要调用JavaScript的jQuery框架. 语 ...

  9. 用Javascript获取页面元素的位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

最新文章

  1. Hololens2-Unity3D开发(一)
  2. 数据库删除记录核心语句 解读 (vb6.0)
  3. Java Servlet 技术简介
  4. redhat6.5 yum register 问题
  5. hihocoder1398 网络流五之最大权闭合子图
  6. SpringBoot学习:读取yml和properties文件的内容
  7. 在项目中使用fastreport_如何在项目管理中使用里程碑
  8. [react] React v15中怎么处理错误边界?
  9. pycharm python 模板配置_pycharm设置python脚本模板
  10. 2005.2.21 至 2005.8.8
  11. [linux 命令笔记] kill
  12. DongLiORM 介绍
  13. 搜狗浏览器收藏夹在哪_搜狗浏览器居然流氓到操作我的微博账号
  14. python集合类型运算符_Python 数据类型和运算符
  15. 机器学习--用朴素贝叶斯分类法辨别男女声音
  16. Bootstrap tab页签刷新加载不显示,只有点击其他标签后第一个才显示
  17. cocos2dx lua加密 和 解密
  18. RabbitVCS无法启动,右键失效解决方案
  19. 计算机信息安全攻防大赛,计算机学院举办校第六届网络攻防大赛
  20. 视频分割软件有什么,怎么分割视频

热门文章

  1. 视觉导航路径编辑器使用教程
  2. @mpx/cli 脚手架源码解析
  3. 手把手教你使用 Java 在线生成 pdf 文档
  4. 【Python】python数据库编程
  5. informatica关于计划任务的表说明
  6. java finalize方法总结、GC执行finalize的过程
  7. 零基础想学习Web安全,如何入门?
  8. 这些java名词你都了解嘛?JDK、openJDK、java EE、jre、jvm、jep、jar、jmod
  9. 智能硬件类产品测试项目总结
  10. 有偏估计 and 无偏估计