`
zhouyrt
  • 浏览: 1173203 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

各情景下元素宽高的获取

 
阅读更多

 

为了叙述简单,这里仅拿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

0
0
分享到:
评论
1 楼 anymango 2011-11-25  
getBoundingClientRect()右边界减去左边界也行

相关推荐

    各情景下元素宽高的获取实现代码

    本文主要探讨了在不同情况下如何获取HTML元素的宽高,尤其是宽度。以下是对这些知识点的详细解释: 首先,元素的宽度可以通过`offsetWidth`和`offsetHeight`属性获取,这两个属性包含了元素自身的width、height以及...

    论文研究-基于贝叶斯修正的多阶段情景元素生成.pdf

    论文研究-基于贝叶斯修正的多阶段情景元素生成.pdf, 针对证券市场中资产未来收益的不确定性问题,本文基于随机波动率模型刻画了资产未来收益的情景元素,得到了资产未来...

    信息化环境下高中元素化合物教学中情景创设的策略.docx

    ### 信息化环境下高中元素化合物教学中情景创设的策略 #### 摘要与背景 在信息化快速发展的今天,教育领域也在经历着深刻的变革。高中化学作为基础教育的重要组成部分,面临着如何有效提升教学质量和学生学习体验...

    李天枭洪涛-典型机构典型情景下的能源与碳达峰系列.pdf

    【标题】:“李天枭洪涛-典型机构典型情景下的能源与碳达峰系列.pdf” 【描述】:“此系列分析了不同情景下典型机构的能源消耗与碳排放情况,以探讨碳达峰的关键路径。” 【标签】:“碳达峰” 在能源与气候变化...

    高血压情景教学论文.doc

    高血压情景教学是一种创新的教学方式,主要应用于医学教育,特别是护理专业的教学中。这种方法将理论知识与实际操作相结合,让学生在模拟真实情境中学习和掌握高血压的护理知识和技能。 首先,高血压作为常见的慢性...

    20210228-中金公司-量化多因子系列(2):非线性假设下的情景分析因子模型.pdf

    然而,在实际的投资过程中,投资者会发现不同板块、不同风格的股票往往存在不同的投资逻辑,即因子对股票收益的预测能力可能是非线性的,而非线性假设下的情景分析因子模型正是为了解决这一问题而提出。 情景分析法...

    浅谈如何利用音乐元素创设小学美术教学情景

    本文探讨了如何在小学美术教学中融入音乐元素,以创设一个更为生动、富有审美情趣的教学情景,提升学生的艺术感受能力和创新思维。文章首先对小学美术教学的现状进行了分析,指出了传统教学方法的局限性,例如任务型...

    新课标下高中英语情景教学的创设与实践

    在探讨新课标下高中英语情景教学的创设与实践之前,首先需要了解情景教学的定义及其在教育领域中的意义。情景教学是指在教学过程中,教师根据教学内容和学生的学习特点,创设一定的教学情境,让学生在特定的情境中...

    RCP2.6和RCP4.5情景下中亚五国棉花和冬小麦逐年需水量数据集(2020-2100).rar

    1. "CottonRCP26":这个文件可能包含了在RCP2.6情景下,中亚五国棉花种植的年需求水量数据。数据可能包括每年每种作物的灌溉需求、不同地区的差异以及气候变化对需水量的影响。 2. "CottonRCP45":同理,此文件可能...

    Linux内核情景分析(下)

    《Linux内核情景分析(下)》是一本深入解析Linux内核的重要教程,由毛德操和胡希明两位专家撰写,出自浙江大学出版社。这本书旨在帮助读者理解Linux内核的工作原理,通过具体的情景分析,将复杂的内核概念与实际应用...

    Android智能情景模式

    在使用Android智能情景模式时,用户应熟悉如何创建和编辑情景,设置触发条件(如时间、地点或事件),以及调整各个模式下的系统设置,如音量、屏幕亮度、网络连接等。定期检查并更新应用程序,以获取最新的改进和...

    聚焦高中数学课堂教学情景

    总之,情景教学法在高中数学教学中的应用,是新课程改革背景下教师必须掌握的一项重要教学技能。通过情景教学,不仅可以提高教学的有效性,还能激发学生的学习兴趣,培养学生的创新能力,以及加强学生的思想道德教育...

    情景教学法在高中美术教学中的应用探析

    首先,情景教学法的基本概念是通过设定特定的情境,借助形象的元素,引发学生的情感反应,帮助他们更好地理解和消化知识。在高中阶段,学生的抽象思维能力已初步形成,但情境作为感性与理性思维间的桥梁,仍然对教学...

    Android智能情景模式01

    3. **应用特定设置**:允许用户对特定应用程序的通知进行管理,例如在特定情景下禁用某些应用的推送。 4. **自动化操作**:用户可以设定在进入或退出某情景模式时执行的自动化任务,如开启或关闭某个应用、发送短信...

    基于重大活动网络安全保障情景下的应急体系研究.pdf

    本文将深入探讨基于重大活动网络安全保障情景下的应急体系构建,旨在提供一套有效的应对策略和解决方案。 首先,我们需要理解重大活动网络安全的特殊性。这类活动通常伴随着大规模的信息流动和网络访问,可能成为...

Global site tag (gtag.js) - Google Analytics