js中document对象的基本操作样式和内容(二)

最新推荐文章于 2024-03-22 13:12:02 发布

旧时光的小弥猫

最新推荐文章于 2024-03-22 13:12:02 发布

阅读量319

点赞数

本文链接：https://blog.csdn.net/weixin_44007988/article/details/102693191

版权

js中document对象的基本操作样式和内容(二)

<html>
	<head>
		<title>js的document对象操作元素内容和属性</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
			#div01{
				width: 200px;
				height: 200px;
				border: solid 1px orange;
			}
		</style>
		<script type="text/javascript">
			function getContext(){
				//获取元素对象
				var div=document.getElementById("div01");
				//获取元素内容
//				alert(div.innerHTML);//获取所有内容 不会解析html标签
				alert(div.innerText);//获取除了html标签以外的内容，它会解析html内容
			}
			
			//修改元素内容
			function updateContext(){
				//获取元素对象
				var div=document.getElementById("div01");
				//修改元素内容
				div.innerHTML="<b>我喜欢学习，喜欢打游戏！！</b>";//innerHTML覆盖原有内容,修改的时候会解析html内容
			}
			
			function updateContext2(){
				//获取元素对象
				var div=document.getElementById("div01");
				//修改元素内容
				div.innerText="<b>哈哈哈哈哈哈哈哈哈</b>";//innerText覆盖原有内容,不会解析html的内容
			}
		</script>
	</head>
	<body>
		<h3>js的document对象操作元素内容和属性</h3>
		<input type="button" name="" id="" value="获取元素内容--innerHTML&innerText" onclick="getContext();"/>
		<input type="button" name="" id="" value="修改元素内容--innerHTML" onclick="updateContext();"/>
		<input type="button" name="" id="" value="修改元素内容--innerText" onclick="updateContext2()"/>
		<hr />
		<div id="div01">
			<b>每天努力学习，才能成功！！</b>
		</div>
	</body>
</html>

<html>
	<head>
		<title>js的document对象操作元素的内容</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
			#showdiv{
				width: 200px;
				height: 200px;
				border: solid 1px ;
			}
			.common{
				width: 200px;
				height: 200px;
				border: solid 1px ;
			}
			.common2{
				width: 200px;
				height: 200px;
				border: solid 1px ;
				background-color: aqua;
			}
		</style>
		<script type="text/javascript">
			//操作的是style属性来操作的样式
			function testOperCss(){
				//获取元素对象
				var showdiv=document.getElementById("showdiv");
				//添加元素样式
				showdiv.style.backgroundColor="#FFA500";
				//js修改元素样式
				showdiv.style.border="solid 2px red";
				//js删除样式
				showdiv.style.border="";
			}
			
			//js操作样式---className
			function testOperCss2(){
				//获取元素对象
				var div01=document.getElementById("div01");
				//获取
//				alert(div01.className);

				//添加和修改
//				div01.className="common2";
				
				//删除
				div01.className="";
			}
		</script>
	</head>
	<body>
		<h3>js的document对象操作元素的内容</h3>
		<input type="button" name="" id="" value="操作元素样式--style" onclick="testOperCss();"/>
		<input type="button" name="" id="" value="操作元素样式--className" onclick="testOperCss2();"/>
		<hr />
		<div id="showdiv" style="border: solid 2px blue;">
			
		</div>
		<div id="div01" class="common">
			
		</div>
	</body>
</html>

旧时光的小弥猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中document对象的基本操作样式和内容(二)

js中document对象的基本操作样式和内容(二)<html> <head> <title>js的document对象操作元素内容和属性</title> <meta charset="UTF-8"/> <style type="text/css"> #div01{ width: 200px; ...
复制链接

扫一扫