[JavaScript知识库] [JavaScript]Dom

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> [JavaScript]Dom—获取当前样式 -> 正文阅读

[JavaScript知识库][JavaScript]Dom—获取当前样式

wanan

1、获取行间样式

当我们获取页面样式时，可以通过以下方式，但是以下方式只能获取行内样式，而无法获取行外或者外联样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Dom—获取当前样式</title>
		<style>
		#Div1{
			background-color: red;
			height: 300px;
		}
		</style>
		<script type="text/javascript">
            window.onload=function(){
				var odiv1=document.getElementById("Div1");
				// alert(odiv1.style.width);输出width"300px"
				// alert(odiv1.style.backgroundColor);无法输出
				// alert(odiv1.style.height);同样无法输出
				
				// 【注】通过上述操作，只能获取到行间的css样式，对于行外的，或者外联的样式获取不到
		</script>
	</head>
	<body>
		<div id="Div1" style="width: 300px; "></div>
	</body>
</html>

2、获取当前页面所有的样式

要想获取页面所有的样式，可以通过以下的语法来实现，但是此语法对于IE浏览器内核不兼容，适用于火狐/谷歌/Safari。
通过下述方式，获取当前所有的有效样式，避免行外的或者外联样式无法获取的问题
getComputedStyle( 元素节点 )[ 获取样式类型 ];

【注】针对样式优先级的问题
比如写了两个一样的样式，因为有优先级，所以他会只获取有效的那个
2.外链的样式也是不能获取的
3.这个效果IE浏览器是不支持的，支持火狐/谷歌/Safari

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Dom—获取当前样式</title>
		<style>
		#Div1{
			background-color: red;
			height: 300px;
		}
		</style>
		<script type="text/javascript">
            window.onload=function(){
				var odiv1=document.getElementById("Div1");

				
				/* 
				 通过下述方式，获取当前所有的有效样式，避免行外的或者外联样式无法获取的问题			 
				 getComputedStyle( 元素节点 )[ 获取样式类型 ];	 
				 
								【注】针对样式优先级的问题
				 				比如写了两个一样的样式，因为有优先级，所以他会只获取有效的那个
				 	
				 				2.外链的样式也是不能获取的
				 				
				 				3.这个效果IE浏览器是不支持的，支持火狐/谷歌/Safari 
				 */
				
			 alert(getComputedStyle(odiv1)["height"]);输出外联样式属性“300px” IE浏览器不输出

		</script>
	</head>
	<body>
		<div id="Div1" style="width: 300px; "></div>
	</body>
</html>

3、IE浏览器获取当前样式

IE浏览器获取当前样式的方法
元素节点.currentStyle[ 获取样式类型 ];
通过一个三目运算符完成
function getStyle(elem,attr){
elem获取谁的样式；attr获取哪个样式
return elem.currentStyle ? elem.currentStyle[arr] : getComputedStyle(elem)[arr]
通过判断currenStyle是否存在
若存在，就代表是IE浏览器，就需要使用current来获取
若不存在，就使用Computed普通获取方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Dom—获取当前样式</title>
		<style>
		#Div1{
			background-color: red;
			height: 300px;
		}
		</style>
		<script type="text/javascript">
            window.onload=function(){
				var odiv1=document.getElementById("Div1");
				
				/* 
				 IE浏览器获取当前样式的方法
				 元素节点.currentStyle[ 获取样式类型 ];
				 通过一个三目运算符完成
				 function getStyle(elem,attr){ 
				 //elem获取谁的样式；attr获取哪个样式
				 return elem.currentStyle ? elem.currentStyle[arr] : getComputedStyle(elem)[arr]
				 /* 
				 通过判断currenStyle是否存在 
				 若存在，就代表是IE浏览器，就需要使用current来获取 
				 若不存在，就使用Computed普通获取方式
				 */
				alert(getStyle(odiv1,"width"));
				function getStyle(elem,attr){
					return elem.currentStyle ? elem.currentStyle[attr] : getComputedStyle(elem)[attr];
				} //IE浏览器输出“300px” 
			}
		</script>
	</head>
	<body>
		<div id="Div1" style="width: 300px; "></div>
	</body>
</html>