DAY60-前端入门-javascript（七）JS动画 | JS盒模型 | DOM | BOM
一、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
<style type="text/css">
.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: red;
position: absolute;
top: 0;
left: 20px;
}
</style>
<body>
<div class="sup">
<div class="sub"></div>
</div>
</body>
<script type="text/javascript">
var sup = document.querySelector('.sup');
// 盒子content的width
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>
二、js动画
一、JS结合CSS实现动画
1、通过事件修改指定的样式，形成过渡的第二状态
<style>
#div {
width: 200px;
height: 200px;
background: red;
transition: .2s;
}
</style>
<div id="div"></div>
<script>
div.onclick = function() {
this.style.width = '400px';
}
</script>
2、通过事件修改指定的类名，形成过渡的第二状态
<style>
.div {
width: 200px;
height: 200px;
background: red;
transition: .2s;
}
.div.active {
transform: scale(1.2);
}
</style>
<div id="div" class="div"></div>
<script>
div.onclick = function() {
var t_name = "active"
var c_name = this.className;
if (!c_name.match(t_name)) {
this.className += " " + t_name;
} else {
this.className = c_name.replace(" " + t_name, "");
}
}
</script>
三、DOM
一、JS中标签关系
<div class="sup">
<div class="sub1"></div>
<div class="sub2"></div>
<div class="sub3"></div>
</div>
<script>
var sub2 = document.querySelector('.sub2');
// 父级标签
console.log(sub2.parentElement);
// 上一个标签
console.log(sub2.previousElementSibling);
// 下一个标签
console.log(sub2.nextElementSibling);
var sup = document.querySelector('.sup');
// 所有子标签
console.log(sup.children);
// 第一个子标签
console.log(sup.firstElementChild);
// 最后一个子标签
console.log(sup.lastElementChild);
</script>
二、JS操作页面标签
// 创建一个div标签
var div = document.createElement("div");
// 添加到body末尾，返回自身
div = body.appendChild(div);
// 插入到body中box标签前，返回自身
div = body.insertBefore(div, box);
// 替换掉body中box标签，返回box
box = body.replaceChild(div, box);
// 在body中移除div，返回自身
// 由父级删除指定子级
div = body.removeChild(div);
// 获取父级来删除自身
var res = box.parentElement.removeChild(box);
总结:
1.创建标签只能由document来调用执行
2.一次创建只产生一个标签对象,该标签对象只能存在最后一次操作的位置
四、BOM
1、窗口操作 open
// 新tag打开目标地址
open("http://www.yahoo.com");
// 自身tag转跳目标地址
open("http://www.yahoo.com", '_self');
// 自定义窗口打开目标地址
open("http://www.yahoo.com", '_blank', 'width=300, height=300');
2、历史记录 history
// 历史后退
history.back();
// 历史前进
history.forward()
3、导航器 navigator
// 拥有浏览器信息的字符串
navigator.userAgent;
4、地址信息 location
// 协议
location.protocol
// 服务器
location.hostname
// 端口号
location.port
// 参数拼接
location.search
