update: offset相关属性
This commit is contained in:
qianguyihao
parent
1230ca3925
commit
2a75b5fd8c
@ -371,3 +371,15 @@
|
||||
|
||||
- [margin:auto实现绝对定位元素的水平垂直居中](http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
|
||||
|
||||
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8366012.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
## 常见概念
|
||||
|
||||
### JavaScript的组成
|
||||
@ -638,6 +634,8 @@ onload 事件会在整个页面加载完成之后才触发。为 window 绑定
|
||||
|
||||
## DOM 操作：设置元素的样式
|
||||
|
||||
暂略。
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
|
||||
方式二最大的优点是：可以给属性传递参数。
|
||||
|
||||
### 通过 js 修改元素的样式
|
||||
### 通过 js 设置元素的样式
|
||||
|
||||
语法：
|
||||
|
||||
@ -426,7 +426,7 @@ style的常用属性包括：
|
||||
|
||||
## 通过 js 获取元素当前显示的样式
|
||||
|
||||
我们在上面的内容中，通过`元素.style.className`的方式只能获取**行内样式**。但是，有些元素，只写了**内嵌样式或外链样式**。
|
||||
我们在上面的内容中，通过`元素.style.className`的方式只能获取**行内样式**。但是，有些元素，也写了**内嵌样式或外链样式**。
|
||||
|
||||
既然样式有这么种，那么，如何获取元素当前显示的样式（包括行内样式、内嵌样式、外链样式）呢？我们接下来看一看。
|
||||
|
||||
@ -450,7 +450,7 @@ style的常用属性包括：
|
||||
|
||||
- 如果当前元素没有设置该样式，则获取它的默认值。
|
||||
|
||||
- 该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过`对象.样式名`来读取具体的某一个样式。
|
||||
- 该方法会返回一个**对象**，对象中封装了当前元素对应的样式，可以通过`对象.样式名`来读取具体的某一个样式。
|
||||
|
||||
- 通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性。
|
||||
|
||||
@ -482,7 +482,12 @@ style的常用属性包括：
|
||||
console.log(getStyle(div1, "padding"));
|
||||
console.log(getStyle(div1, "background-color"));
|
||||
|
||||
//兼容方法获取元素样式
|
||||
/*
|
||||
* 兼容方法，获取元素当前正在显示的样式。
|
||||
* 参数：
|
||||
* obj 要获取样式的元素
|
||||
*. name 要获取的样式名
|
||||
*/
|
||||
function getStyle(ele, attr) {
|
||||
if (window.getComputedStyle) {
|
||||
return window.getComputedStyle(ele, null)[attr];
|
||||
@ -500,3 +505,14 @@ style的常用属性包括：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,10 +1,5 @@
|
||||
|
||||
|
||||
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8407109.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
|
||||
## 前言
|
||||
|
||||
JS动画的主要内容如下：
|
||||
@ -19,11 +14,9 @@ JS动画的主要内容如下：
|
||||
|
||||
3、冒泡/兼容/封装
|
||||
|
||||
4、正则
|
||||
|
||||
## offset 家族的组成
|
||||
|
||||
我们知道，三大家族包括：offset/scroll/client。今天来讲一下offset，以及与其相关的匀速动画。
|
||||
我们知道，JS动画的三大家族包括：offset/scroll/client。今天来讲一下offset，以及与其相关的匀速动画。
|
||||
|
||||
> offset的中文是：偏移，补偿，位移。
|
||||
|
||||
@ -43,13 +36,13 @@ js中有一套方便的**获取元素尺寸**的办法就是offset家族。offse
|
||||
|
||||
### 1、offsetWidth 和 offsetHight
|
||||
|
||||
用于检测盒子自身的**宽高+padding+border**，不包括margin。如下：
|
||||
`offsetWidth` 和 `offsetHight`：获取元素的**宽高 + padding + border**，不包括margin。如下：
|
||||
|
||||
- offsetWidth = width + padding + border;
|
||||
- offsetWidth = width + padding + border
|
||||
|
||||
- offsetHeight = Height + padding + border;
|
||||
- offsetHeight = Height + padding + border
|
||||
|
||||
这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。
|
||||
这两个属性，他们绑定在了所有的节点元素上。获取元素之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。
|
||||
|
||||
举例如下：
|
||||
|
||||
@ -84,11 +77,51 @@ js中有一套方便的**获取元素尺寸**的办法就是offset家族。offse
|
||||
</html>
|
||||
```
|
||||
|
||||
### 2、offsetLeft 和 offsetTop
|
||||
### 2、offsetParent
|
||||
|
||||
返回距离上级盒子（带有定位）左边的位置；如果父级都没有定位，则以body为准。
|
||||
`offsetParent`：获取当前元素的**定位父元素**。
|
||||
|
||||
offsetLeft： 从父亲的 padding 开始算，父亲的 border 不算。
|
||||
- 如果当前元素的父元素，**有CSS定位**（position为absolute、relative、fixed），那么 `offsetParent` 获取的是**最近的**那个父元素。
|
||||
|
||||
- 如果当前元素的父元素，**没有CSS定位**（position为absolute、relative、fixed），那么`offsetParent` 获取的是**body**。
|
||||
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box1" style="position: absolute;">
|
||||
<div class="box2" style="position: fixed;">
|
||||
<div class="box3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
var box3 = document.getElementsByClassName("box3")[0];
|
||||
|
||||
console.log(box3.offsetParent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
|
||||
|
||||
### 3、offsetLeft 和 offsetTop
|
||||
|
||||
`offsetLeft`：当前元素相对于其**定位父元素**的水平偏移量。
|
||||
|
||||
`offsetTop`：当前元素相对于其**定位父元素**的垂直偏移量。
|
||||
|
||||
备注：从父亲的 padding 开始算起，父亲的 border 不算。
|
||||
|
||||
举例：
|
||||
|
||||
@ -139,55 +172,15 @@ offsetLeft： 从父亲的 padding 开始算，父亲的 border 不算。
|
||||
</html>
|
||||
```
|
||||
|
||||
在父盒子有定位的情况下，offsetLeft == style.left(去掉px之后)。注意，后者只识别行内样式。但区别不仅仅于此，后面会讲。
|
||||
|
||||
### 3、offsetParent
|
||||
|
||||
检测父系盒子中带有定位的**父盒子节点**。返回结果是该对象的父级（带有定位）。
|
||||
|
||||
- 如果当前元素的父级元素，**没有CSS定位**（position为absolute、relative、fixed），那么offsetParent的返回结果为**body**。
|
||||
|
||||
- 如果当前元素的父级元素，**有CSS定位**（position为absolute、relative、fixed），那么offsetParent的返回结果为**最近的**那个父级元素。
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box1" style="position: absolute;">
|
||||
<div class="box2" style="position: fixed;">
|
||||
<div class="box3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
//offsetParent：复习盒子中带有定位的盒子
|
||||
//复习盒子中都没有定位，返回body
|
||||
//如果有，谁有返回最近哪个
|
||||
|
||||
var box3 = document.getElementsByClassName("box3")[0];
|
||||
|
||||
console.log(box3.offsetParent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
|
||||
在父盒子有定位的情况下，offsetLeft == style.left(去掉px之后)。注意，后者只识别行内样式。但区别不仅仅于此，下面会讲。
|
||||
|
||||
### offsetLeft和style.left区别
|
||||
|
||||
（1）最大区别在于：
|
||||
|
||||
offsetLeft 可以返回没有定位盒子的距离左侧的位置。如果父系盒子中都没有定位，以body为准。
|
||||
offsetLeft 可以返回无定位父元素的偏移量。如果父元素中都没有定位，则body为准。
|
||||
|
||||
style.left 只能获取行内式，如果没有，则返回""（意思是，返回空）;
|
||||
style.left 只能获取行内样式，如果父元素中都没有定位，则返回""（意思是，返回空）;
|
||||
|
||||
（2）offsetTop 返回的是数字，而 style.top 返回的是字符串，而且还带有单位：px。
|
||||
|
||||
@ -200,7 +193,7 @@ div.style.left = "100px";
|
||||
|
||||
```
|
||||
|
||||
（3）offsetLeft 和 offsetTop **只读**，而 style.left 和 style.top 可读写（只读是获取值，可写是赋值）
|
||||
（3）offsetLeft 和 offsetTop **只读**，而 style.left 和 style.top 可读写（只读是获取值，可写是修改值）
|
||||
|
||||
|
||||
（4）如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。
|
||||
@ -273,7 +266,6 @@ div.style.left = "100px";
|
||||
|
||||
## 匀速动画的封装：每间隔30ms，移动盒子10px【重要】
|
||||
|
||||
|
||||
代码如下：
|
||||
|
||||
```html
|
||||
@ -5,11 +5,12 @@
|
||||
|
||||
### clientWidth 和 clientHeight
|
||||
|
||||
盒子调用时：
|
||||
元素调用时：
|
||||
|
||||
- clientWidth：获取盒子区域宽度（padding + width）。
|
||||
- clientWidth：获取元素的可见宽度（width + padding）。
|
||||
|
||||
- clientHeight：获取元素的可见高度（height + padding）。
|
||||
|
||||
- clientHeight：获取盒子区域高度（padding + height）。
|
||||
|
||||
body/html 调用时：
|
||||
|
||||
@ -17,6 +18,12 @@ body/html调用时：
|
||||
|
||||
- clientHeight：获取网页可视区域高度。
|
||||
|
||||
**声明**：
|
||||
|
||||
- `clientWidth` 和 `clientHeight` 属性是只读的，不可修改。
|
||||
|
||||
- `clientWidth` 和 `clientHeight` 的值都是不带 px 的，返回的都是一个数字，可以直接进行计算。
|
||||
|
||||
|
||||
### clientX 和 clientY
|
||||
|
||||
Loading…
Reference in New Issue
Block a user