- 浏览: 2271059 次
- 性别:
- 来自: 成都
文章分类
- 全部博客 (357)
- J2EE (49)
- JavaScript (40)
- Spring (19)
- Struts (5)
- CSS (8)
- Hibernate (16)
- Java (67)
- DWR (4)
- JSON (3)
- XFIRE (1)
- Tomcat (1)
- Ant (2)
- 设计模式 (2)
- 经典收藏 (2)
- JSP (10)
- Linux (0)
- WebLogic (11)
- myeclipse (13)
- Buffalo (4)
- 文件上传相关 (1)
- oracle (33)
- html (6)
- JSTL (3)
- SVN (2)
- GIT (1)
- 孙卫琴(Java网络编程精解) (1)
- DOM4J (2)
- Swing (1)
- AJAX (1)
- Eclipse (5)
- 日志组件 (3)
- PowerDesigner (1)
- Jquery (22)
- IT技术开发相关网址 (1)
- Nutz (1)
- 其它 (1)
- Velocity (3)
- WebService (1)
- MySql (2)
- Android (1)
- Maven (2)
- Quartz (11)
- Lucene (1)
- springsource (1)
- Junit (1)
- Activiti (0)
最新评论
-
yzlseu:
拼凑,没有营养
Activiti进阶—分配组任务 -
zhangsenhao:
非常赞!代码很清楚
SpringMVC3.0+MyIbatis3.0(分页示例) -
xiamw2000:
分页写得不对,应该是 : order by ${orderNa ...
SpringMVC3.0+MyIbatis3.0(分页示例) -
sheertewtw:
...
SpringMVC:上传与下载 -
kingtoon:
...
XSS之xssprotect
转载: js获取html元素宽度的思考
http://blog.csdn.net/zhouruitao/archive/2010/09/07/5867626.aspx
分两种情况讨论:
1、使用内联样式,即直接把CSS写在HTML元素的style属性中
通过以下js代码可以获取width等属性
在firefox,ie,opera,safari,chrome上都可以取得到宽度和高度值。
2、使用嵌入、链入或引入样式表(非内联样式),这时候通过element.style.width是获取不到的
最后封装到一个方法中,
如果只想获取元素的style对象,则只传第一个参数,第二个参数是获取该对象style属性为styName的值。
http://blog.csdn.net/zhouruitao/archive/2010/09/07/5867626.aspx
分两种情况讨论:
1、使用内联样式,即直接把CSS写在HTML元素的style属性中
<div id="d1" style="width:100px;height:200px;"> </div>
通过以下js代码可以获取width等属性
alert(document.getElementById('d1').style.width);//100px
在firefox,ie,opera,safari,chrome上都可以取得到宽度和高度值。
2、使用嵌入、链入或引入样式表(非内联样式),这时候通过element.style.width是获取不到的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>b.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <mce:style type="text/css"><!-- #d2 { width:400px; height:200px; border:5px solid gray; padding:5px; } --></mce:style><style type="text/css" mce_bogus="1"> #d2 { width:400px; height:200px; border:5px solid gray; padding:5px; } </style> <mce:script type="text/javascript"><!-- window.onload=function(){ //2、使用嵌入、链入或引入样式表(非内联样式) //ie:通过currentStyle alert(document.getElementById('d2').currentStyle.width);//400px ie //ff,safari,opera,chrome:通过window.getComputedStyle var el=document.getElementById('d2'); alert(window.getComputedStyle(el,null).style.width);//400px safari,opera,chrome } // --></mce:script> </head> <body> <div id="d2"></div> </body> </html>
最后封装到一个方法中,
function getRealStyle(el,cssName) { var len=arguments.length, sty, f, fv; 'currentStyle' in el ? sty=el.currentStyle : 'getComputedStyle' in window ? sty=window.getComputedStyle(el,null) : null; if(cssName==="opacity" && document.all){ f = el.filters; f && f.length>0 && f.alpha ? fv=f.alpha.opacity/100 : fv=1; return fv; } cssName==="float" ? document.all ? cssName='styleFloat' : cssName='cssFloat' : cssName; sty = (len==2) ? sty[cssName] : sty; return sty; }
如果只想获取元素的style对象,则只传第一个参数,第二个参数是获取该对象style属性为styName的值。
发表评论
-
java json-lib & jQuery & jsonp
2016-06-30 11:31 771参考链接: 1、http://hanqunfeng.iteye ... -
JavaScript异步编程学习
2016-06-19 14:59 749一 JavaScript学习资源 1、Reg Braithwa ... -
jQuery图表(jqPlot,Highcharts)
2012-05-18 00:48 23509jQuery图表在http://www.oschina.net ... -
JavaScript中的arguments,callee,caller,call,appy [备忘]
2012-05-08 23:13 1562转载:JavaScript中的argume ... -
IE,FF获取文件绝对路径方法
2012-03-25 23:30 4939参考资料 1 解决Firefox3,IE7,IE8上传图片预览 ... -
My97DatePicker常用练习
2011-09-15 17:03 5082参考官网资料:http://www.m ... -
jQuery之实战(checkbox,table)
2011-08-19 16:22 3769实现功能如下:参考图片 1 页面加载时效果 2 全选效果 ... -
jQuery之checkbox(复选框)
2011-08-18 17:06 2058业务需求:经常在用户登记中有这样的东西,只选择其中一项或者多项 ... -
jQuery之radio(单选)
2011-08-18 15:41 2424页面代码如下: <inpu ... -
jQuery之DOM
2011-08-17 14:45 1438参考资料 1 跳蚤的小窝:)jQuery对象和DOM对象【jQ ... -
jQuery之入门(ready)
2011-08-17 11:46 2074参考资料 1 jquery $(document).ready ... -
IE下调试JS的小工具-CompanionJS
2011-08-02 13:12 1859参考资料 1 推荐一个IE下调试JS的小工具-Companio ... -
Frameset导致Cookies和Session丢失的原因及解决办法
2011-07-25 12:28 4289参考资料 1 Frameset导致Cookies和Sessio ... -
iframe自适应,跨域,JS的document.domain
2011-04-13 17:10 4704转载:iframe自适应,跨域 ... -
MIME帮助手册
2011-04-13 17:06 1315转载:MIME帮助手册 http://www.cnblogs ... -
Javascript:通用不间断滚动&省、市、地区联动选择JS封装类
2011-04-13 12:40 3545通用不间断滚动JS封装类&省、市、地区联动选择JS封装 ... -
JS:表格排序
2011-03-24 15:09 2770参考资料 js的table排序,支持多浏览器,多列同时排序,自 ... -
JavaScript CSS Style属性对照表
2011-03-14 16:41 1410转载:JavaScript CSS Style属 ... -
国人:JSON-RPC之初识
2011-03-14 15:20 3766相关链接 1 json-rpc-for-java http:/ ... -
HTML A标记事件写法
2011-01-05 17:24 2871HTML A标记事件写法 出现状况:点击A标记事件后,整个框 ...
相关推荐
本文主要对原生JS获取元素集合的子元素宽度的实现方法进行介绍,代码详细,具有很好的参考价值,需要的朋友一起来看下吧
主要介绍了javascript获取隐藏元素(display:none)的高度和宽度的方法,实现方法比较复杂,需要的朋友可以参考下
下面小编就为大家带来一篇js获取Html元素的实际宽度高度的方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
javascript获取隐藏元素(display-none)的高度和宽度的方法.docx
本文实例讲述了JavaScript实现获取某个元素相邻兄弟节点的prev与next方法。分享给大家供大家参考,具体如下: /** * 获取相邻元素 * @param ele 参考物元素 * @param type 类型,上一个(1)or下一个(0) * @return ...
JavaScript获取HTMLDOM节点元素的方法的总结
如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案,大家可以参考参考,如果你有...元素多层嵌套,JS获取问题</title> </head> <body> <span>span <span>span <span>1 <spa
本文实例讲述了JavaScript获取表单内所有元素值的方法。分享给大家供大家参考。具体如下: 下面的JS代码可以遍历指定表单中的所有元素,并输出元素的值 <!DOCTYPE html> <html> <body> <form id=...
JS获取网页中HTML元素的几种方法分析
js获取浏览器窗口宽度、高度 判断浏览器窗口大小改变
纯js实现html页面元素的拖拉功能,只需要给要拖动的html元素,加上指定的函数,就可实现元素的拖动效果。
Javascript库,用于基于其父元素宽度的自适应字体大小。 查看现场演示 用法 添加 < script src =" http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js " > </ script > < script type =...
js获取文本框的值!js获取浏览器高度和宽度值[收集].pdf
Javascript 后端的字符串像素宽度测量。 支持的字体: Andale Mono Arial Avenir Avenir Next Comic Sans MS Courier New Georgia Helvetica Impact Times New Roman Trebuchet MS Verdana Webdings Open Sans ...
js无限极跨越框架获得html元素的位置(源码) 内有实例!
为HTML元素添加一自定义的属性非常方便,只须将其加到尖括号中即可,与内置属性地位相等。 <br />如我们要为TextBox元素添加属性idvalue: <br />只须在原来的控件后面加上:idvalue=”…”,成为: ...
除了getElementsByClassName()函数,我们可以自己动手编写程式来通过class获取元素,接下来我们整理了一下JavaScript通过HTML的class来获取HTML元素的方法总结,需要的朋友可以参考下
javascript获取网页高度宽度.rar
javascript 获取网页高度宽度.pdf