HTML——JS—样式

最新推荐文章于 2022-06-29 16:56:08 发布

Jhinhua

最新推荐文章于 2022-06-29 16:56:08 发布

阅读量135

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104933236

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

样式操作

操作样式的
			设置样式
				元素节点.style.样式名 = “样式值”
			获取的时候	
				元素节点.style.样式名
					只能获取行内样式
				获取所有的设置得的样式
					tag_node是元素节点  style_name是样式名称
					function getStyle(tag_node,style_name){
						if(tag_node.currentStyle){
							return tag_node.currentStyle[style_name]
						}else{
							return getComputedStyle(tag_node)[style_name]
						}
					}

演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				background-color: palegoldenrod;
			}
		</style>
	</head>
	<body>
		<p style="color: red;">岱宗夫如何？齐鲁青未了。造化钟神秀，阴阳割昏晓。荡胸生曾云，决眦入归鸟。会当凌绝顶，一览众山小。</p>
		
		<script>
			// 获取元素节点
			var p_node = document.querySelector("p")
			/**
			 * 设置样式
			 * 		调用style属性就行了
			 * 		元素节点.style.样式名 = 样式值
			 * 			样式值赋予的是字符串格式的
			 */
			p_node.style.textIndent = "2em"
			
			
			/**
			 * 获取样式
			 * 		元素节点.style.样式名
			 * 			只能获取行内样式  不能获取内部或者外部样式
			 */
			var colorValue = p_node.style.color
			console.log(colorValue)
			// 内部设计的
			var backColorValue = p_node.style.backgroundColor
			console.log(backColorValue)
			
			
			// 获取内部样式
			/**
			 * 	元素节点.currentStyle  [这个不兼容谷歌]
			 * 			获取的是元素节点当前对应的样式对象 -- 以字典的形式存在				获取其中的某个样式
			 * 				元素节点.currentStyle[样式名]
			 * 
			 * getComputedStyle(元素节点)  [IE不兼容]
			 * 		获取的是元素节点当前对应的样式对象
			 * 			获取其中的某个样式
			 * 				getComputedStyle(元素节点)[样式名]
			 */
			// backColorValue = p_node.currentStyle["background-color"]
			// console.log(backColorValue)
			
			backColorValue = getComputedStyle(p_node)["background-color"]
			console.log(backColorValue)
			
			colorValue = getComputedStyle(p_node)["color"]
			console.log(colorValue)
			
			
			/**
			 * 为了兼容浏览器 将上面获取样式的操作封装成方法
			 * 
			 * tag_node --- 接受的是要获取样式的元素节点
			 * style_name --- 接受要获取的样式名
			 */
			function get_style(tag_node, style_name){
				if(tag_node.currentStyle){
					return tag_node.currentStyle[style_name]
				}else{
					return getComputedStyle(tag_node)[style_name]
				}
			}
			
			colorValue = get_style(p_node, "color")
			console.log(colorValue)	
		</script>
		
	</body>
</html>