- 浏览: 1163764 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
zhizhen23:
LZ 提供的链接地址失效了
重写的isPlainObject方法 -
LovingBaby:
LovingBaby 写道function fun() {}f ...
读jq之二(两种扩展) -
LovingBaby:
说的很清楚!jQuery作者为了实现简洁调用的苦心!高超的编程 ...
读jq之一(jq对象的组成) -
hard_ly:
...
将伪数组转换成数组 -
zlxzlxzlxzlxzlx:
这不能算是任意进制之间的转换,例如二十六进制、十二进制又该如何 ...
用递归实现十进制数转换N进制
为了叙述简单,这里仅拿width示例。
情景一,元素style属性设置了width/height
<div style="width:100px;">test<div> <script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width); </script>
如上,使用el.style.width即可。如果没有在style属性中设置width,那么使用el.style.width将获取不到,如下
<div>test<div> <script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width); </script>
所有浏览器中弹出的是空字符串。即使将样式嵌在页面的css中也仍然获取不到,如下
<style> div {width: 100px} </style> <div>test<div> <script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width); </script>
这时候getComputedStyle或currentStyle将会派上用场。
情景二,元素通过引入样式表设置width/height
有两种方式引入样式表,一是使用link标签引入单独的css文件,二是直接在html页面中使用style标签。这里使用第二种方式测试。如下
<style> div {width: 100px} </style> <div>test<div> <script> function getStyle(el, name) { if(window.getComputedStyle) { return window.getComputedStyle(el, null); }else{ return el.currentStyle; } } var div = document.getElementsByTagName('div')[0]; alert(getStyle(div, 'width')); </script>
所有浏览器中均弹出了100px。说明通过getComputedStyle和currentStyle可以获取到元素被定义在样式表中的宽高。
那如果元素即没有在style属性中设置宽高,也没有在样式表中设置宽高,还能用getComputedStyle或currentStyle获取吗?答案是getComputedStyle可以,currentStyle不可以。如下
<div>test<div> <script> function getStyle(el, name) { if(window.getComputedStyle) { return window.getComputedStyle(el, null); }else{ return el.currentStyle; } } var div = document.getElementsByTagName('div')[0]; alert(getStyle(div, 'width')); </script>
div 既没有设置style属性,也没有引入样式表。在Firefox/IE9/Safari/Chrome/Opera中可以获取到宽高(浏览器默认),但IE6/7/8中却不行,返回的是auto。
注意,这里getStyle方法优先使用getComputedStyle,而IE9已经支持该方法。因此IE9中可以获取到宽高。但IE6/7/8不支持,只能使用currentStyle获取。
情景三,元素既没有设置style属性,也没有引入样式表
<div>test<div> <script> function getStyle(el,name) { if(window.getComputedStyle) { return window.getComputedStyle(el, null)[name]; }else{ return el.currentStyle[name]; } } function getWH(el, name) { var val = name === "width" ? el.offsetWidth : el.offsetHeight, which = name === "width" ? ['Left', 'Right'] : ['Top', 'Bottom']; // display is none if(val === 0) { return 0; } for(var i = 0, a; a = which[i++];) { val -= parseFloat( getStyle(el, "border" + a + "Width") ) || 0; val -= parseFloat( getStyle(el, "padding" + a) ) || 0; } return val + 'px'; } var div = document.getElementsByTagName('div')[0]; alert(getWH(div, 'width')); </script>
思路很简单:获取元素的offsetWidth/offsetHeight,减去元素的padding和border。
相关:
http://www.cnblogs.com/snandy/archive/2011/09/05/2167056.html
发表评论
-
仅Firefox中A元素包含Select时点击Select不能选择option
2014-09-26 11:03 1394这是在使用京东的一个日期组件时碰到的bug,重现bug的代码 ... -
IE11的API变化
2014-06-10 15:40 1242IE11已经登陆Win8.1,它的API有了很大变更 ... -
Button未设type属性时在非IE6/7中具有submit特性
2014-06-04 12:01 783如下 <!DOCTYPE html> < ... -
光标从编辑器移入本页面中的其它输入域后,IE中每次只在编辑器首部插入内容
2013-11-25 08:10 1023做编辑器开发时碰到的 重现步骤: 1. 将光标 ... -
仅IE6/7不支持字符串属性/索引读取
2013-05-31 14:35 1126IE6/7不支持字符串属性/索引读取(Property ac ... -
IE9/Firefox/Safari/Chrome/Opera支持模拟触发自定义DOM事件
2013-05-30 13:57 1250自定义DOM事件是在DOM3中定义的,它不是由DOM原生触发 ... -
各浏览器中innerHTML实现差异(2)
2012-05-17 07:40 1292如下代码 <p id="tit&q ... -
各浏览器中innerHTML实现差异(1)
2012-05-16 06:59 1528如下代码 <p id="tit&quo ... -
xhrhttprequest部分浏览器中不支持put/delete
2012-04-16 20:59 2985后端同事想采用REST风格,hailiang在看jQuery文 ... -
仅IE6/7浏览器SPAN元素包含块级元素会使SPAN的背景色显示
2012-02-23 18:19 1497这个bug发生在下面的网页,如下: http://yy ... -
设置iframe为可编辑状态后敲回车在各浏览器中输出的innerHTML不同
2012-02-14 18:57 2288测试代码如下 <!doctype html> ... -
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012-02-14 14:30 2855设置iframe的document.designMode为On ... -
各浏览器中for in顺序的差异
2012-02-06 20:04 1526这个问题在sohu博客中也有:写博客-插入图片图片顺序在Chr ... -
IE6/7不支持hashchange事件
2011-11-11 13:51 1500如下 <!doctype html> & ... -
设置元素浮动的几种方式
2011-11-10 11:25 1666们知道获取元素的浮动属性,各浏览器中使用的属性不同。大家都知道 ... -
textarea元素IE6/7/8/9/10中默认有上下滚动条
2011-11-10 11:19 1694IE下有上下滚动条。其它浏览器没有。先看一个示例 &l ... -
元素未显示设置width/height时IE中无法使用currentStyle获取(默认为auto)
2011-11-09 12:13 1340我们知道获取元素的实际宽高在IE中可以使用currentSty ... -
各浏览器中使用getAttribute获取checkbox/radio的checked值不同
2011-11-08 21:18 1916如下 <!DOCTYPE HTML> < ... -
IE6/7不支持setAttribute设置style / 不支持getAttribute获取style属性值
2011-11-08 09:39 1543IE6/7中不能通过setAttribute设置元素的s ... -
各浏览器对click方法的支持差异
2011-10-20 21:58 1132click方法可以用来模拟用户点击。有的浏览器中所有元素都具有 ...
相关推荐
本文主要探讨了在不同情况下如何获取HTML元素的宽高,尤其是宽度。以下是对这些知识点的详细解释: 首先,元素的宽度可以通过`offsetWidth`和`offsetHeight`属性获取,这两个属性包含了元素自身的width、height以及...
论文研究-基于贝叶斯修正的多阶段情景元素生成.pdf, 针对证券市场中资产未来收益的不确定性问题,本文基于随机波动率模型刻画了资产未来收益的情景元素,得到了资产未来...
### 信息化环境下高中元素化合物教学中情景创设的策略 #### 摘要与背景 在信息化快速发展的今天,教育领域也在经历着深刻的变革。高中化学作为基础教育的重要组成部分,面临着如何有效提升教学质量和学生学习体验...
【标题】:“李天枭洪涛-典型机构典型情景下的能源与碳达峰系列.pdf” 【描述】:“此系列分析了不同情景下典型机构的能源消耗与碳排放情况,以探讨碳达峰的关键路径。” 【标签】:“碳达峰” 在能源与气候变化...
高血压情景教学是一种创新的教学方式,主要应用于医学教育,特别是护理专业的教学中。这种方法将理论知识与实际操作相结合,让学生在模拟真实情境中学习和掌握高血压的护理知识和技能。 首先,高血压作为常见的慢性...
综上所述,这篇文献综述为理解情景感知需求获取与建模的现状、挑战和未来趋势提供了全面的视角,对于从事相关研究或开发工作的人员具有很高的参考价值。通过系统性的梳理和评价,该研究有助于推动需求工程领域的发展...
然而,在实际的投资过程中,投资者会发现不同板块、不同风格的股票往往存在不同的投资逻辑,即因子对股票收益的预测能力可能是非线性的,而非线性假设下的情景分析因子模型正是为了解决这一问题而提出。 情景分析法...
本文探讨了如何在小学美术教学中融入音乐元素,以创设一个更为生动、富有审美情趣的教学情景,提升学生的艺术感受能力和创新思维。文章首先对小学美术教学的现状进行了分析,指出了传统教学方法的局限性,例如任务型...
在探讨新课标下高中英语情景教学的创设与实践之前,首先需要了解情景教学的定义及其在教育领域中的意义。情景教学是指在教学过程中,教师根据教学内容和学生的学习特点,创设一定的教学情境,让学生在特定的情境中...
1. "CottonRCP26":这个文件可能包含了在RCP2.6情景下,中亚五国棉花种植的年需求水量数据。数据可能包括每年每种作物的灌溉需求、不同地区的差异以及气候变化对需水量的影响。 2. "CottonRCP45":同理,此文件可能...
《Linux内核情景分析(下)》是一本深入解析Linux内核的重要教程,由毛德操和胡希明两位专家撰写,出自浙江大学出版社。这本书旨在帮助读者理解Linux内核的工作原理,通过具体的情景分析,将复杂的内核概念与实际应用...
在使用Android智能情景模式时,用户应熟悉如何创建和编辑情景,设置触发条件(如时间、地点或事件),以及调整各个模式下的系统设置,如音量、屏幕亮度、网络连接等。定期检查并更新应用程序,以获取最新的改进和...
总之,情景教学法在高中数学教学中的应用,是新课程改革背景下教师必须掌握的一项重要教学技能。通过情景教学,不仅可以提高教学的有效性,还能激发学生的学习兴趣,培养学生的创新能力,以及加强学生的思想道德教育...
首先,情景教学法的基本概念是通过设定特定的情境,借助形象的元素,引发学生的情感反应,帮助他们更好地理解和消化知识。在高中阶段,学生的抽象思维能力已初步形成,但情境作为感性与理性思维间的桥梁,仍然对教学...
3. **应用特定设置**:允许用户对特定应用程序的通知进行管理,例如在特定情景下禁用某些应用的推送。 4. **自动化操作**:用户可以设定在进入或退出某情景模式时执行的自动化任务,如开启或关闭某个应用、发送短信...