HTML——JS—文本+属性

最新推荐文章于 2024-04-30 00:45:00 发布

Jhinhua

最新推荐文章于 2024-04-30 00:45:00 发布

阅读量129

点赞数

分类专栏： Web前端

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

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

文本
样式

文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p class="page">岱宗夫如何？齐鲁青未了。造化钟神秀，阴阳割昏晓。荡胸生曾云，决眦入归鸟。会当凌绝顶，一览众山小。</p>
		
		<script>
			// 根据类选择器获取元素节点
			var page_node = document.querySelector(".page")
			
			/**
			 * 获取/设置元素节点中的内容
			 * 			在设置的时候是有区别的
			 * 		innerHTML --- 识别内容中标签 
			 * 		innerText --- 不识别标签 会把标签当做纯文本显示在文档上
			 */
			// 获取内容
			var content = page_node.innerHTML
			console.log(content)
			
			content = page_node.innerText
			console.log(content)
			
			// 设置内容
			//page_node.innerHTML += "<b>摘抄自朱自清的春</b>"
			page_node.innerText += "<b>摘抄自朱自清的春</b>"
			
		</script>
		
	</body>
</html>

样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#article{
				color: red;
			}
			.page {
				background-color: palegoldenrod;
			}
		</style>
	</head>
	<body>
		<p title="spring">春天像小姑娘，花枝招展的，笑着，走着。</p>
		
		
		<script>
			// 根据元素选择器获取
			var p_node = document.querySelector("p")
			/**
			 * 设置属性
			 * 		1.元素节点.属性名 = 属性值
			 * 			这种形式不能设置自定义属性
			 * 		类 特殊 --  className  设置类
			 * 		2.setAtttribute(属性名, 属性值)
			 */
			p_node.id = "article"
			p_node.className = "page"
			
			p_node.setAttribute("name", "zhuziqing")
			
			// 对于自定义属性名的区别
			//p_node.index = 0
			p_node.setAttribute("index", 0)
			
			
			
			
			/**
			 * 获取属性值
			 * 		1.元素节点.属性名
			 * 				获取不到自定义属性
			 * 		2.getAttribute(属性名)
			 */
			var value = p_node.title
			console.log(value)
			
			value = p_node.className
			console.log(value)
			// 在原来的基础上添加类 一定要注意空格
			p_node.className += " back"
			
			// 2.
			value = p_node.getAttribute("name")
			console.log(value)
			
			// 自定义属性的获取
			//console.log(p_node.index)
			value = p_node.getAttribute("index")
			console.log(value)
			
			
			
			/**
			 * 建议使用 setAttribute设置属性
			 * 建议使用 getAttribute设置属性
			 */
			
		</script>
	</body>
</html>