前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM
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
二、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>
(二)、JS通过定时器实现动画
- 轮播图
三、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);
// 指定的子标签,根据索引获取
sub2 = sup.children[1];
</script>
(二)、JS操作页面标签
// 创建一个div标签,创建一个标签,就只有一个标签课添加
var div = document.createElement("div");
// 添加到body末尾,返回自身
div = body.appendChild(div);
// 将div插入到body中box标签前,前者插入到后者之前,返回自身
div = body.insertBefore(div, box);
// 用div替换掉body中box标签,用前者替换后者,返回box
box = body.replaceChild(div, box);
// 在body中移除div,返回自身
div = body.removeChild(div);
总结:
- 创建元素只能由document来创建,创建一次只能创建一个标签对象,添加只能添加到最后一次操作的位置(某个标签的子标签的最后一个)
- 删除标签后,删除对象被保存,可以 重新添加回来
(三)、JS操作DOM一般步骤
1、创建标签:div = document.createElement('div');
2、设置标签样式文本:div.className = "div";
3、添加到页面指定位置: body.appendChild("div"); …………
四、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
前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM的更多相关文章
- Unity3D学习笔记(十六):Animator新动画
新动画系统: 给模型选择动画类型 普通动画:Generic 人形动画:Humanoid 建立动画控制器 - 在Project右击 - 选择Create-AnimatorContorller 将对应动画 ...
- HTML第六章 盒子模型
什么是盒子模型: (1)边框: (2)内边距: (3)外边距: (4)元素内容·: (5)背景色·: 边框: 属性: 颜色(border-color),粗细(border-width),样式(bord ...
- JavaScript基础15——js的DOM对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js初级DOM&BOM知识点总结
第一章 js的组成DOM BOM ECMAScript javaScript 是一种直译是脚本语言 js语言特点 .脚本编写语言 .基于对象的语言 .简单性 .动态性 .安全性 .跨平台性 C/S是C ...
- javascript总结47: JS动画原理&jQuery 效果- 各种动画
1 动画的原理就是: 盒子本身的位置+步长 2 什么是步长? var box=document.getElementById('box'); btn.onclick = function() { // ...
- JavaScript学习总结(十六)——Javascript闭包(Closure)
原文地址: http://www.cnblogs.com/xdp-gacl/p/3703876.html 闭包(closure)是Javascript语言的一个难点,也是它的特色, 很多高级应用都要依 ...
- three.js 源代码凝视(十六)Math/Frustum.js
商域无疆 (http://blog.csdn.net/omni360/) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:商域无疆 - 本博客专注于 敏捷开发 ...
- 【WPF学习】第五十六章 基于帧的动画
除基于属性的动画系统外,WPF提供了一种创建基于帧的动画的方法,这种方法只使用代码.需要做的全部工作是响应静态的CompositionTarge.Rendering事件,触发该事件是为了给每帧获取内容 ...
- javascript 盒子模型
oDiv.clientWidth--->width+左右padding oDiv.clientHeight--->height+上下padding oDiv.clientTop---> ...
随机推荐
- Eclipes更改字体颜色
有图有真像 更改字体大小
- 数据可视化----matplotlib.pylot
一.输入具体数 plt.plot([3,1,4,5,2]) #自动生成y轴 plt.ylabel("Grade") #y轴的标签 plt.savefig('test1',dpi=6 ...
- Linux(三)—— 项目部署环境搭建
目录 项目部署环境搭建 一.linux上网 二.rpm包管理 1.光盘挂载 2.安装卸载rpm包 3.查询是否安装 4.查看软件包 5.互相依赖关系的软件包 三.yum包管理 1.使用aliyun的y ...
- UVA10118_Free Candies状态压缩
这题大概题意是,有四列糖果,一个人手中最多拿五个水果,每次拿水果只能从每一列最上面开始拿. 而如果手中的糖果相同就会成对抵消,奖励给玩家 问玩家怎样取能取到最多的糖果,并输出对数 这题是运用动态规划, ...
- 深入了解line-height(各种单位总结1.5/150%/1.5em)
默认状态,浏览器使用1.0-1.2 line-height, 这是一个初始值.你可以定义line-height属性来覆盖初始值:p{line-height:140%} 你可以有5种方式来定义line- ...
- linux中常用的命令大全
系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...
- DB2连接
ibm_db.connect 创建非持久连接. ibm_db.pconnect 创建持久连接. 在最初的Python脚本请求之后,持久的连接保持打开状态,这允许后续的Python请求重新使用连接. 后 ...
- 当vue页面异步加载的数据想在页面上渲染怎么办
<template> <div class="test"> <div v-for="(item, index) in arr" : ...
- element ui step组件在另一侧加时间轴显示
这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...
- spring_AOP的注解开发
logger日志类: package cn.mepu.utils; import org.aspectj.lang.ProceedingJoinPoint; import org.aspectj.la ...