diff --git a/04-JavaScript基础/22-DOM简介和DOM操作.md b/04-JavaScript基础/22-DOM简介和DOM操作.md index 245d19e..90b4c72 100644 --- a/04-JavaScript基础/22-DOM简介和DOM操作.md +++ b/04-JavaScript基础/22-DOM简介和DOM操作.md @@ -1,5 +1,4 @@ - ## 常见概念 ### JavaScript的组成 @@ -632,11 +631,6 @@ onload 事件会在整个页面加载完成之后才触发。为 window 绑定 上方代码中，方式一和方式二均可以确保：在页面加载完毕后，再执行 js 代码。 -## DOM 操作：设置元素的样式 - -暂略。 - - ## 我的公众号 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 diff --git a/04-JavaScript基础/23-通过style对象设置行内样式.md b/04-JavaScript基础/23-通过style对象设置行内样式.md new file mode 100644 index 0000000..67f3ad4 --- /dev/null +++ b/04-JavaScript基础/23-通过style对象设置行内样式.md @@ -0,0 +1,502 @@ + + +## style属性的获取和修改 + +在DOM当中，如果想设置样式，有两种形式： + +- className（针对内嵌样式） + +- style（针对行内样式） + +这篇文章，我们就来讲一下style。 + +需要注意的是：style是一个对象，只能获取**行内样式**，不能获取内嵌的样式和外链的样式。例如： + +```html + + + + + Title + + + + +
+ + + + +``` + +打印结果： + +![](http://img.smyhvae.com/20180129_1407.png) + +上图显示，因为border属性不是行内样式，所以无法通过style对象获取。 + +### 通过 js 读取元素的样式 + +语法：（方式一） + +```javascript + 元素.style.样式名 +``` + +备注：我们通过style属性读取的样式都是**行内样式**。 + +语法：（方式二） + +```javascript + 元素.style["属性"]; //格式 + + box.style["width"]; //举例 +``` + +方式二最大的优点是：可以给属性传递参数。 + +### 通过 js 修改元素的样式 + +语法： + +```javascript + 元素.style.样式名 = 样式值; +``` + +举例： + +``` + box1.style.width = "300px"; + box1.style.backgroundColor = "red"; // 驼峰命名法 + +``` + +备注：我们通过style属性设置的样式都是**行内样式**，而行内样式有较高的优先级。但是如果在样式中的其他地方写了`!important`，则此时`!important`会有更高的优先级。 + +### style属性的注意事项 + +style属性需要注意以下几点： + +（1）样式少的时候使用。 + +（2）style是对象。我们在上方已经打印出来，typeof的结果是Object。 + +（3）值是字符串，没有设置值是“”。 + +（4）命名规则，驼峰命名。 + +（5）只能获取行内样式，和内嵌和外链无关。 + +（6）box.style.cssText = “字符串形式的样式”。 + + +`cssText`这个属性，其实就是把行内样式里面的值当做字符串来对待。在上方代码的基础之上，举例： + +```html + +``` + +打印结果： + +![](http://img.smyhvae.com/20180129_1410.png) + +### style的常用属性 + +style的常用属性包括： + +- backgroundColor + +- backgroundImage + +- color + +- width + +- height + +- border + +- opacity 设置透明度 (IE8以前是filter: alpha(opacity=xx)) + +注意DOM对象style的属性和标签中style内的值不一样，因为在JS中，`-`不能作为标识符。比如： + +- DOM中：backgroundColor + +- CSS中：background-color + +## style属性的举例 + +我们针对上面列举的几个style的样式，来举几个例子： + +- 举例1、改变div的大小和透明度 + +- 举例2、当前输入的文本框高亮显示 + +- 举例3、高级隔行变色、高亮显示 + +下面来逐一实现。 + +### 举例1：改变div的大小和透明度 + +代码举例： + +```html + +
+ + + +``` + +### 举例2：当前输入的文本框高亮显示 + +代码实现： + +```html + + + + + + + + + + + + + + +``` + +### 举例3：高级隔行变色、高亮显示 + +```html + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
序号姓名课程成绩
+ 1 + 生命壹号语文100
+ 2 + 生命贰号日语99
+ 3 + 生命叁号营销学98
+ 4 + 生命伍号数学90
+ 5 + 许嵩英语96
+ 6 + vae体育90
+
+ + + + + + +``` + +实现的效果如下： + +![](http://img.smyhvae.com/20180129_1520.gif) + +代码解释： + +上方代码中，我们**用到了计数器myColor来记录每一行最原始的颜色**（赋值白色之前）。如果不用计数器，可能很多人以为代码是写的：（错误的代码） + +```html + + +``` + +这种错误的代码，实现的效果却是：（未达到效果） + +![](http://img.smyhvae.com/20180129_1525.gif) + +## 通过 js 获取元素当前显示的样式 + +我们在上面的内容中，通过`元素.style.className`的方式只能获取**行内样式**。但是，有些元素，只写了**内嵌样式或外链样式**。 + +既然样式有这么种，那么，如何获取元素当前显示的样式（包括行内样式、内嵌样式、外链样式）呢？我们接下来看一看。 + +### 获取元素当前正在显示的样式 + +（1）w3c的做法： + +```javascript + window.getComputedStyle("要获取样式的元素", "伪元素"); +``` + +两个参数都是必须要有的。参数二中，如果没有伪元素就用 null 代替（一般都传null）。 + +（2）IE和opera的做法： + +```javascript + obj.currentStyle; +``` + +注意： + +- 如果当前元素没有设置该样式，则获取它的默认值。 + +- 该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过`对象.样式名`来读取具体的某一个样式。 + +- 通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性。 + +综合上面两种写法，就有了一种兼容性的写法，同时将其封装。代码举例如下： + +```html + + + + + + + + + +
+ + + + +``` + +打印结果： + +![](http://img.smyhvae.com/20180204_1425.png) + + diff --git a/04-JavaScript基础/25-scroll相关属性和缓动动画.md b/04-JavaScript基础/25-scroll相关属性和缓动动画.md index 852b7fe..010bdbf 100644 --- a/04-JavaScript基础/25-scroll相关属性和缓动动画.md +++ b/04-JavaScript基础/25-scroll相关属性和缓动动画.md @@ -1,17 +1,24 @@ - ## scroll 相关属性 -当我们用鼠标滚轮，滚动网页的时候，会触发window.onscroll()方法。效果如下：（注意看控制台的打印结果） +### window.onscroll() 方法 + +当我们用鼠标滚轮，滚动网页的时候，会触发 window.onscroll() 方法。效果如下：（注意看控制台的打印结果） ![](http://img.smyhvae.com/20180202_2258.gif) +如果你需要做滚动监听，可以使用这个方法。 + +我们来看看和 scroll 相关的有哪些属性。 + ### 1、ScrollWidth 和 scrollHeight `ScrollWidth` 和 `scrollHeight`：获取元素**整个滚动区域**的宽、高。包括 width 和 padding，不包括 border和margin。 -**注意**：`scrollHeight` 的特点是：如果内容超出了盒子，`scrollHeight`为内容的高（包括超出的内容）；如果不超出，`scrollHeight`为盒子本身的高度。`ScrollWidth`同理。 +**注意**： + +`scrollHeight` 的特点是：如果内容超出了盒子，`scrollHeight`为内容的高（包括超出的内容）；如果不超出，`scrollHeight`为盒子本身的高度。`ScrollWidth`同理。 ```html @@ -70,11 +77,11 @@ 当某个元素满足`scrollWidth - scrollLeft == clientWidth`时，说明水平滚动条滚动到底了。 -这个实战经验非常有用，可以用来判断用户是否已经将内容滑动到底了。比如说，有些场景下，希望用户能够看完“活动规则”，才允许触发接下来的表单操作。 +这个实战经验非常有用，可以用来判断用户是否已经将内容滑动到底了。比如说，有些场景下，希望用户能够看完“长长的活动规则”，才允许触发接下来的表单操作。 ### scrollTop 的兼容性 -scrollTop 这个属性的写法要注意兼容性，如下。 +如果要获取页面滚动的距离，scrollTop 这个属性的写法要注意兼容性，如下。 （1）如果文档没有 DTD 声明，写法为： @@ -82,7 +89,7 @@ scrollTop 这个属性的写法要注意兼容性，如下。 document.body.scrollTop ``` -在没有 DTD 声明的情况下，如果不是这种写法，chrome浏览器认不出来。 +在没有 DTD 声明的情况下，要求是这种写法，chrome浏览器才能认出来。 （2）如果文档有 DTD 声明，写法为： @@ -90,7 +97,7 @@ scrollTop 这个属性的写法要注意兼容性，如下。 document.documentElement.scrollTop ``` -在有 DTD 声明的情况下，如果不是这种写法，IE678认不出来。 +在有 DTD 声明的情况下，要求是这种写法，IE6、7、8才能认出来。 综合上面这两个，就诞生了一种兼容性的写法： @@ -117,10 +124,9 @@ scrollTop 这个属性的写法要注意兼容性，如下。 document.compatMode === "BackCompat" // 未声明 ``` -### 将 scrollTop 和 scrollLeft 封装为 json +### 将 scrollTop 和 scrollLeft 进行封装 - -将 scrollTop 和 scrollLeft封装为一个方法，名叫scroll()，返回值为 json。json里的键为 top 和 left。以后就直接调用json.top 和json.left就好。 +这里，我们将 scrollTop 和 scrollLeft 封装为一个方法，名叫scroll()，返回值为 一个对象。以后就直接调用`scroll().top` 和 `scroll().left`就好。 代码实现： @@ -131,7 +137,7 @@ scrollTop 这个属性的写法要注意兼容性，如下。 @@ -140,20 +146,20 @@ scrollTop 这个属性的写法要注意兼容性，如下。 @@ -161,7 +167,9 @@ scrollTop 这个属性的写法要注意兼容性，如下。 ``` -上方代码中，函数定义的那部分就是要封装的代码。另外还有一种较为复杂的封装方式： +上方代码中，函数定义的那部分就是要封装的代码。 + +另外还有一种比较麻烦的封装方式：（仅供参考） ```javascript function scroll() { // 开始封装自己的scrollTop @@ -199,10 +207,8 @@ function scroll() { // 开始封装自己的scrollTop `document.documentElement`表示文档的html标签。也就是说，基本结构当中的 `html 标签`而是通过`document.documentElement`访问的，并不是通过 document.html 去访问的。 - ## scrollTop 举例：固定导航栏 - 完整版代码实现： （1）index.html： @@ -332,7 +338,6 @@ function scroll() { // 开始封装自己的scrollTop - 2018-02-03-scrollTop固定导航栏.rar - ## 缓动动画 ### 三个函数 @@ -397,7 +402,6 @@ function scroll() { // 开始封装自己的scrollTop ![](http://img.smyhvae.com/20180202_2046.gif) - ### 缓慢动画的封装（解决四舍五入的问题） 我们发现一个问题，上图中的盒子最终并没有到达400px的位置，而是只到了396.04px就停住了： @@ -680,3 +684,14 @@ function scroll() { // 开始封装自己的scrollTop 小火箭的图片资源： ![](http://img.smyhvae.com/20180203-Top.jpg) + + +## 我的公众号 + +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/20190101.png) + + diff --git a/04-JavaScript基础/26-client(可视区)相关属性.md b/04-JavaScript基础/26-client(可视区)相关属性.md index 1333ded..b2e2bd9 100644 --- a/04-JavaScript基础/26-client(可视区)相关属性.md +++ b/04-JavaScript基础/26-client(可视区)相关属性.md @@ -185,3 +185,13 @@ function client() { + +## 我的公众号 + +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/20190101.png) + +