JavaScript基础之第十天js效果实战

最新推荐文章于 2024-04-21 13:31:23 发布

geekmice

最新推荐文章于 2024-04-21 13:31:23 发布

阅读量268

点赞数

分类专栏：前端文章标签： css js html javascript html5

本文链接：https://blog.csdn.net/greek7777/article/details/105882254

版权

前端专栏收录该内容

63 篇文章 3 订阅

订阅专栏

元素内容操作

删除元素内容
1. 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			#zxw{
				width: 300px;height: 200px;border: 1px solid black;
				margin: 0 auto;
			}
			#btn{
				width: 100px;height: 30px;margin: 50px auto;display: block;
			}
		</style>
	</head>
	<body>
		<div id="zxw">曹休在正史上是怎样的?他真的比不上司马懿?这是很多读者都比较关心的问题</div>
		<button id="btn">点击删除</button>
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			var zxw = document.getElementById("zxw");
			btn.onclick = function(){
				//删除元素内容
				zxw.innerHTML="";
				/* innerHTML,innerText区别？
					innerHTML:获取或者设置元素的内容(包括所有内容标签+文本信息,包含HTML标签)
					innerText:获取胡总和设置元素文本信息内容(内容,不包含HTML标签) */
			}
		</script>
	</body>
</html>

复制元素内容

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.zxw{
				width: 300px;height: 200px;border: 1px solid black;
				margin: 0 auto;
			}
			#btn{
				width: 100px;height: 30px;margin: 50px auto;display: block;
			}
		</style>
	</head>
	<body>
		<div id="zxw1" class="zxw">步练师为什么能让赤壁之战中主降的步骘代替陆逊成为丞相？</div>
		<button id="btn">按钮</button>
		<div id="zxw2" class="zxw"></div>
		<script type="text/javascript">
			var btn = document.getElementById("btn");//获取按钮
			var zxw1 = document.getElementById("zxw1");//获取div1
			var zxw2 = document.getElementById("zxw2");//获取div2
			btn.onclick = function(){
				//复制元素内容，
				zxw2.innerHTML=zxw1.innerHTML;
			}
		</script>
	</body>
</html>

效果图

元素移动操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.zxw{
				width: 300px;height: 200px;border: 1px solid black;
				margin: 0 auto;
			}
			#btn{
				width: 100px;height: 30px;margin: 50px auto;display: block;
			}
		</style>
	</head>
	<body>
		<div id="zxw1" class="zxw">解密赤壁之战：蒋干盗书事件背后的真实历史
1</div>
		<button id="btn">按钮</button>
		<div id="zxw2" class="zxw"></div>
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			var zxw1 = document.getElementById("zxw1");
			var zxw2 = document.getElementById("zxw2");
			var abc = 1;
			btn.onclick = function(){
				if (abc == 1) {
					//复制元素内容
					zxw2.innerHTML=zxw1.innerHTML;
					//删除zxw1中的元素内容
					zxw1.innerHTML="";
					abc = 2;
				} else{
					//复制元素内容
					zxw1.innerHTML=zxw2.innerHTML;
					//删除zxw1中的元素内容
					zxw2.innerHTML="";
					abc = 1;					
				}

			}
		</script>
	</body>
</html>

效果图

元素内容交换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.zxw{
				width: 300px;height: 200px;border: 1px solid black;
				margin: 0 auto;
			}
			#btn{
				width: 100px;height: 30px;margin: 50px auto;display: block;
			}
		</style>
	</head>
	<body>
		<div id="zxw1" class="zxw">盒子11</div>
		<button id="btn">按钮</button>
		<div id="zxw2" class="zxw">盒子22</div>
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			var zxw1 = document.getElementById("zxw1");
			var zxw2 = document.getElementById("zxw2");
			var abc = 1;
			btn.onclick = function(){
				if (abc == 1) {
					var p = zxw2.innerHTML;
					//复制元素内容
					zxw2.innerHTML=zxw1.innerHTML;
					//删除zxw1中的元素内容
					zxw1.innerHTML=p;
					abc = 2;
				} else{
					var p = zxw1.innerHTML;
					//复制元素内容
					zxw1.innerHTML=zxw2.innerHTML;
					//删除zxw1中的元素内容
					zxw2.innerHTML=p;
					abc = 1;					
				}

			}
		</script>
	</body>
</html>

元素样式操作

操纵元素尺寸

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#btn{
				width: 100px;height: 30px;display: block;margin: 0 auto;
			}
			#zxw{
				margin: 50px auto;background: red;
			}
		</style>
	</head>
	<body>
		<button id="btn">点击</button>
		<div id="zxw" style="width: 200px;height: 200px;"></div>
		
		<script type="text/javascript">
			var btn=document.getElementById("btn");//获取按钮id="btn"
			var zxw=document.getElementById("zxw");//获取盒子id="zxw"
			// 按钮点击事件
			btn.onclick = function(){
//				获取元素尺寸并转成数值类型
				var o_w=parseInt(zxw.style.width);
				var o_h=parseInt(zxw.style.height);
//				alert(typeof o_h);
				
//				计算新的尺寸
				var n_w=o_w+20+"px";//宽度
				var n_h=o_h+20+"px";//高度
				// 盒子宽度300px以内依次增加20px,大于300px以后将其固定为300px；
				if (n_h>="300px") {
					zxw.style.height="300px";
				} else{
					zxw.style.height=n_h;
				}
				// 宽度点击依次加20px
//				元素尺寸重新赋值
				zxw.style.width=n_w;
				
			}
		</script>
	</body>
</html>

效果图

geekmice

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础之第十天js效果实战

元素内容操作删除元素内容案例 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;}...
复制链接

扫一扫