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的更多相关文章

  1. Unity3D学习笔记(十六):Animator新动画

    新动画系统: 给模型选择动画类型 普通动画:Generic 人形动画:Humanoid 建立动画控制器 - 在Project右击 - 选择Create-AnimatorContorller 将对应动画 ...

  2. HTML第六章 盒子模型

    什么是盒子模型: (1)边框: (2)内边距: (3)外边距: (4)元素内容·: (5)背景色·: 边框: 属性: 颜色(border-color),粗细(border-width),样式(bord ...

  3. JavaScript基础15——js的DOM对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. js初级DOM&BOM知识点总结

    第一章 js的组成DOM BOM ECMAScript javaScript 是一种直译是脚本语言 js语言特点 .脚本编写语言 .基于对象的语言 .简单性 .动态性 .安全性 .跨平台性 C/S是C ...

  5. javascript总结47: JS动画原理&jQuery 效果- 各种动画

    1 动画的原理就是: 盒子本身的位置+步长 2 什么是步长? var box=document.getElementById('box'); btn.onclick = function() { // ...

  6. JavaScript学习总结(十六)——Javascript闭包(Closure)

    原文地址: http://www.cnblogs.com/xdp-gacl/p/3703876.html 闭包(closure)是Javascript语言的一个难点,也是它的特色, 很多高级应用都要依 ...

  7. three.js 源代码凝视(十六)Math/Frustum.js

    商域无疆 (http://blog.csdn.net/omni360/) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:商域无疆 -  本博客专注于 敏捷开发 ...

  8. 【WPF学习】第五十六章 基于帧的动画

    除基于属性的动画系统外,WPF提供了一种创建基于帧的动画的方法,这种方法只使用代码.需要做的全部工作是响应静态的CompositionTarge.Rendering事件,触发该事件是为了给每帧获取内容 ...

  9. javascript 盒子模型

    oDiv.clientWidth--->width+左右padding oDiv.clientHeight--->height+上下padding oDiv.clientTop---> ...

随机推荐

  1. docker-compose 搭建 Redis Sentinel 测试环境

    docker-compose 搭建 Redis Sentinel 测试环境 本文介绍如何使用 docker-compose 快速搭建一个 Redis Sentinel 测试环境.其中 Redis 集群 ...

  2. 关闭禁用 Redis 危险命令

    Redis 的危险命令主要有: flushdb,清空数据库 flushall,清空所有记录,数据库 config,客户端连接后可配置服务器 keys,客户端连接后可查看所有存在的键,当 redis k ...

  3. PAT_A1131#Subway Map

    Source: PAT A1131 Subway Map (30 分) Description: In the big cities, the subway systems always look s ...

  4. zabbix主动模式设置

    zabbix客户端发数据给服务端分为主被动两种模式,主动模式是zabbix客户端主动向服务端发送数据,被动模式是被动等待服务端来取数据. 主动模式: 客户端每隔一段时间主动向服务端发起连接请求--&g ...

  5. 27-python基础-python3-异常处理(try except)

    到目前为止,在 Python 程序中遇到错误,或“异常”,意味着整个程序崩溃.不希望这发生在真实世界的程序中. 相反,希望程序能检测错误,处理它们,然后继续运行.   实例1: 当试图用一个数除以零时 ...

  6. wrong mechandise category

    Issue: cannot open masterdata for this two UPCs since the error below is displayed, but I checked an ...

  7. Spring项目下js文件无法引用

    问题:最近练习spring-mvc框架的时候,引用了jQuery,但是运行的时候,jQuery做的事情都没有响应,代码也没有任何报错,在网上找了一下,发现是由于spring配制的是/,所有的资源都被屏 ...

  8. teb教程2

    http://wiki.ros.org/teb_local_planner/Tutorials/Inspect%20optimization%20feedback 检查优化反馈 简介:怎样检查优化的轨 ...

  9. KiCAD绘制电源符号

    KiCAD绘制电源符号 KiCAD自带的电源符号有时候不符合我们的操作习惯,需要自己重新定义电源符号,这时候就需要新建(不能更改系统自带库的电源符号) 1.新建符号,参照下图行设置 2.放置引脚和图形 ...

  10. xargs使用之空格处理

    xargs指定分隔符为'\n' (默认用空格分隔) locate xxx | xargs -d '\n' ls -l xargs使用 -0 参数会以字符串的'\0'结尾为分隔符,可以在文本传给xarg ...