JavaScript-DOM-获取样式

最新推荐文章于 2022-06-04 20:46:25 发布

java_zhaoyanli

最新推荐文章于 2022-06-04 20:46:25 发布

阅读量359

点赞数

分类专栏： web-javascript 文章标签： JavaScript DOM

本文链接：https://blog.csdn.net/java_zhaoyanli/article/details/50776591

版权

web-javascript 专栏收录该内容

93 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
	<script>
		function getStyle(){
			var d1 = document.getElementById("d1");
			/*d1.style.backgroundColor="green";*/
			var width = d1.style.width;
			console.log(width);
		}

		function getStyle1(){
			var d2 = document.getElementById("d2");
			//只能获取 内联样式
			/**var width = d2.style.width;
			var height = d2.style.height;**/

			//获取经过计算后的样式(内、外部样式表中的值)
			/*var width = document.defaultView.getComputedStyle(d2).width;
			var height = document.defaultView.getComputedStyle(d2).height;*/


			//判断浏览器是否支持 currentStyle
			if(d2.currentStyle){
				//IE低版本 中 获取 计算后的样式值
				var width = d2.currentStyle.width;
				var height = d2.currentStyle.height;
				//window.alert("width:"+width+",height:"+height);
				window.alert(width + ":" + height);
			}else{
				var width = document.defaultView.getComputedStyle(d2).width;
				var height = document.defaultView.getComputedStyle(d2).height;
				window.alert(width + ":" + height);
			}
		}
	</script>
	<style>
		#d2{
			width:200px;
			height:200px;
			background-color:pink;
		}
		#d2{
			width:400px;
		}

	</style>
 </head>

 <body>
  <div id="d1" style="width:100px;height:100px;background-color:red;"></div>
	<button οnclick="getStyle()">获取样式</button>
	<div id="d2">
		
	</div>
	<button οnclick="getStyle1()">获取样式</button>
 </body>
</html>

java_zhaoyanli

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-DOM-获取样式

new document function getStyle(){ var d1 = document.getElementById("d1"); /*d1.style.backgroundColor="green";*/ var width = d1.style.width; console.log(width); } function getS
复制链接

扫一扫