js之盒模型,动画以及文档操作_parseint(getcomputedstyle(body).getpropertyvalue('-CSDN博客

本文链接：https://blog.csdn.net/qq_42737056/article/details/83246916

一,js盒模型

1、width | height

- parseInt(getComputedStyle(ele, null).getPropertyValue('width'))
- parseInt(getComputedStyle(ele, null).getPropertyValue('height'))

2、padding + width | padding + height

- clientWidth
- clientHeight

3、border + padding + width | border + padding + height

- offsetWidth
- offsetHeight

4、结合绝对定位，距离最近定位父级的Top | Left

- offsetTop
- offsetLeft

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>JS盒模型</title>
	<style>
		.sup {
			width: 200px;
			height: 200px;
			padding: 30px;
			border: 5px solid black;
			background-color:  orange;
			margin: 20px;
			position: relative;
		}
		.sub {
			width: 100px;
			height: 100px;
			padding: 20px;
			border: 5px solid black;
			background-color: blue;
			position: absolute;
			top: 0;
			left: 20px;
		}
	</style>
</head>
<body>
	<div class="sup">
		<div class="sub"></div>
	</div>
</body>
<script>
	var sup = document.querySelector('.sup');
	//盒子content宽
	var width = parseInt(getComputedStyle(sup, null).width);
	console.log(width)
 
	//盒子padding+width  ==>  子级的可活动范围
	var p_width = sup.clientWidth;
	console.log(p_width);

	//盒子border+padding+width   ==> 可视区域
	var b_p_width = sup.offsetWidth;
	console.log(b_p_width);

	//盒子距离定位父级的top  left
	var sup_top = sup.offsetTop;
	var sup_left = sup.offsetLeft;
	console.log(sup_top);
	console.log(sup_left);

	var sub = document.querySelector('.sub');
	// 父级定位(relative)后,子级活动区域为父级的client(padding+width)区域
	var sub_top = sub.offsetTop;
	var sub_left = sub.offsetLeft;
	console.log(sub_top);
	console.log(sub_left);
</script>
</html>

二,js动画

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>js动画</title>
	<style>
		.box {
			width: 200px;
			height: 200px;
			background-color: pink;
			transition: .5s;
		}
		.box.r {
			border-radius: 50%;
		}
		.box.h {
			height: 400px;
		}
	</style>
</head>
<body>
	<button class="button1">変长</button>
	<button class="button2">切换宽度</button>
	<button class="button3">切换边界圆角</button>
	<button class="button4">切换高度</button>
	<button class="button5">变短</button>
	<div class="box"></div>
</body>
<script>
	var box = document.querySelector('.box');
	var b1 = document.querySelector('.button1');
	var b2 = document.querySelector('.button2');
	var b3 = document.querySelector('.button3');
	var b4 = document.querySelector('.button4');
	var b5 = document.querySelector('.button5');
	b1.onclick = function() {
		box.style.width = '400px';
	}
	b5.onclick = function() {
		box.style.width = '200px';
	}
	b2.onclick = function() {
		var width = getComputedStyle(box,null).width;
		if (width.match('200px')) {
			box.style.width = '400px';
		} else {
			box.style.width = '200px';
		}
	}
	b3.onclick = function() {
		var c_name = box.className;
		console.log(c_name)
		// 可能是'box' | 'box h' | 'box r' | 'box h r'

		// if (c_name == 'box') {
		if (!c_name.match("r")) {
			box.className += " r";
		} else {
			// 不是直接切回box
			// box.className = "box";
			// 而且去掉r
			box.className = c_name.replace(" r", "");
		}
	}
	b4.onclick = function () {
		var c_name = box.className;
		// 没有h类名, 单独添加h类名,反之去除h类名
		if (!c_name.match("h")) {
			box.className += " h";
		} else {
			box.className = c_name.replace(" h", "");
		}
	}
</script>
</html>

三,DOM树结构关系

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>DOM树结构关系</title>
</head>
<body>
	<h1>DOM树结构关系</h1>
	<hr>
	<div class="sup">
	    <div class="sub1"></div>
	    <div class="sub2"></div>
	    <div class="sub3"></div>
	</div>
</body>
<script>
	var body = document.querySelector('body');
	console.log(body);
</script>
<script>
	var sub2 = document.querySelector('.sub2');
	//sub2的父级标签
	console.log('sub2父标签',sub2.parentElement);
	//sub2的上一个标签
	console.log('sub2的上兄弟标签',sub2.previousElementSibling);
	//sub2的下一个标签
	console.log('sub2的下兄弟标签',nextElementSibling);

	var sup = document.querySelector('.sup');
	//sup下面的所有子标签
	console.log('sup的所有子标签',sup.children);
	//sup的第一个子标签
	console.log("sup第一个子标签:", sup.firstElementChild);
    // sup的最后一个子标签
	console.log("sup最后一个子标签:", sup.lastElementChild);
</script>
</html>

四DOM操作
1,创建标签只能由document来调用执行
2,一次创建只产生一个标签对象,该标签对象只能存在最后一次操作的位置

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Dom操作</title>
	<style>
		.box {
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.p {
			width: 100px;
			height: 100px;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div class="box">boxboxboxob</div>
	<button class="b1">添加到box中</button>
	<button class="b2">添加到body中</button>
	<button class="b3">添加到body下Box之前</button>
	<button class="b4">将body下的box替换为p</button>
	<button class="b5">删除box</button>
</body>
<script>
	var body = document.querySelector('body');
	var box = document.querySelector('.box');
	var b1 = document.querySelector('.b1');
	var b2 = document.querySelector('.b2');
	var b3 = document.querySelector('.b3');
	var b4 = document.querySelector('.b4');
	var b5 = document.querySelector('.b5');

	//创建p标签
	var p = document.createElement('p');
	console.log(p);

	//设置标签样式
	p.className = 'p';

	//添加到指定区域
	b1.onclick = function() {
		var res = box.appendChild(p);
		console.log(res);//自身
	}
	b2.onclick = function() {
		body.appendChild(p);
	}
	
	//插入到指定区域
	b3.onclick = function() {
		//将p查到box之前(前者插到后者之前)
		var res = body.insertBefore(p,box);
		console.log(res); //box
	}
	b4.onclick = function() {
		//由父级删除制定子级
		// var res = body.removeChild(box);
		//获取父级来删除自身
		var res = box.parentElement.removeChild(box);

		console.log(res); //boy
		setTimeout(function() {
			//删除后,标签对象依然可以被js保存,继而可以重新添加到页面
			body.appendChild(res);
		},1000)
	}
</script>
</html>

五,Bom操作

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>BOM</title>
</head>
<body>
	<button class="b1">open</button>
	<button class="b2">前进</button>
	<button class="b3">浏览器信息</button>
</body>
<!-- open -->
<script type="text/javascript">
	var b1 = document.querySelector('.b1');
	b1.onclick = function () {
		// 新tag打开目标地址
		// window.open("http://www.yahoo.com");
		// 自身tag转跳目标地址
		// open("http://www.yahoo.com", '_self');
		// 自定义窗口打开目标地址
		open("http://www.yahoo.com", '_blank', 'width=300, height=300');
	}
</script>
<script type="text/javascript">
	var b2 = document.querySelector('.b2');
	b2.onclick = function () {
		// 历史后退
		// history.back();
		// 历史前进
		history.forward();
		// history.go(num)
	}
</script>
<script type="text/javascript">
	var b3 = document.querySelector('.b3');
	b3.onclick = function () {
		console.log(navigator.userAgent);
		if (navigator.userAgent.match("Chrome")) {
			alert("谷歌浏览器")
		}
	}
</script>
<script type="text/javascript">
	// 协议
	console.log(location.protocol);
	// 服务器
	console.log(location.hostname);
	// 端口号
	console.log(location.port);
	// 参数拼接
	console.log(location.search);
</script>
</html>