欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Cannot read property ‘width‘ of undefined“

程序员文章站 2022-06-07 13:17:46
...

问题: 获取元素当前显示的样式
报错: Cannot read property ‘width’ of undefined"
原因: currentStyle只有IE浏览器支持,其他的浏览器都不支持
解决方法:
(1)其他浏览器使用getComputedStyle()获取。
(2)同时兼容:
相关知识:
getComputedStyle()是window的方法,可直接使用
第一个参数:
需要获取样式的元素
第二个参数:
可以传递一个伪元素,一般选择null
返回一个对象,对象中封装了当前元素对应的样式
通过 对象.样式名 读取
若获取的样式没有设置,则会获取到真实的值,而不是默认值。 不支持IE8及以下浏览器;
currentStyle与ComputedStyle获取到的样式都是只读的,只能通过style属性修改

代码:

	<script type="text/javascript">
		
		window.onload = function(){
			var box1 = document.getElementById("box1");
			var btn01 = document.getElementById("btn01");
			btn01.onclick = function(){
				//alert(box1.style.width);	
				/*
				 获取元素当前显示的样式
				 	语法:元素.currentStyle.样式名
				 	
				 	currentStyle只支持IE浏览器,其他的浏览器都不可以
				 * */
				
				//alert(box1.currentStyle.width);
				//alert(box1.currentStyle.backgroundColor);
				
				
				/*
				 在其他浏览器里使用getComputedStyle()
				 	这个是window的方法,可直接使用
				 	第一个参数:
				 		需要获取样式的元素
				 	第二个参数:
				 		可以传递一个伪元素,一般选择null
					
					返回一个对象,对象中封装了当前元素对应的样式
						通过  对象.样式名  读取
						若获取的样式没有设置,则会获取到真实的值,而不是默认值
					
					不支持IE8及以下浏览器
				 
				 
				 * */
				/*var obj = getComputedStyle(box1,null);
				alert(getComputedStyle(box1,null).width);*/
				
				//正常浏览器
				//alert(getComputedStyle(box1,null).backgroundColor);
				
				//IE8
				//alert(box1.currentStyle.backgroundColor);
				
				//alert(getStyle(box1,"width"));
				
				var w = getStyle(box1,"width");
				alert(w);
			};
			
			function getStyle(obj,name){
				if(getComputedStyle){
					//正常浏览器
				return getComputedStyle(obj,null)[name];
				}else{
					//IE8
				return obj.currentStyle[name];
				}
			}
		};
		
	</script>
相关标签: 前端 javascript