From 0bb33431a3eda15cfc490f7e9ec3bb17120aecb8 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Tue, 3 Sep 2019 21:29:32 +0800 Subject: [PATCH] =?UTF-8?q?add:=20=E9=80=9A=E8=BF=87=20js=20=E8=8E=B7?= =?UTF-8?q?=E5=8F=96=E5=85=83=E7=B4=A0=E7=9A=84=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 03-JavaScript基础/24-DOM简介和DOM操作.md | 3 + .../25-通过style对象设置行内样式.md | 134 +++++++++--------- ...象Event和冒泡.md => 32-事件对象Event和冒泡.md} | 0 .../{27-事件委托.md => 33-事件委托.md} | 0 ...和内置对象.md => 34-BOM的常见内置方法和内置对象.md} | 0 .../{29-原型链.md => 35-原型链.md} | 0 .../{30-常见代码解读.md => 36-常见代码解读.md} | 0 12-Vue基础/00-Vue的介绍和vue-cli.md | 7 +- 12-Vue基础/01-01.Vue的系统指令.md | 4 +- 9 files changed, 73 insertions(+), 75 deletions(-) rename 05-前端基本功：CSS和DOM练习/06-DOM操作练习：通过style对象设置样式.md => 03-JavaScript基础/25-通过style对象设置行内样式.md (81%) rename 03-JavaScript基础/{26-事件对象Event和冒泡.md => 32-事件对象Event和冒泡.md} (100%) rename 03-JavaScript基础/{27-事件委托.md => 33-事件委托.md} (100%) rename 03-JavaScript基础/{28-BOM的常见内置方法和内置对象.md => 34-BOM的常见内置方法和内置对象.md} (100%) rename 03-JavaScript基础/{29-原型链.md => 35-原型链.md} (100%) rename 03-JavaScript基础/{30-常见代码解读.md => 36-常见代码解读.md} (100%) diff --git a/03-JavaScript基础/24-DOM简介和DOM操作.md b/03-JavaScript基础/24-DOM简介和DOM操作.md index 0ec6886..d446e2e 100644 --- a/03-JavaScript基础/24-DOM简介和DOM操作.md +++ b/03-JavaScript基础/24-DOM简介和DOM操作.md @@ -636,6 +636,9 @@ onload 事件会在整个页面加载完成之后才触发。为 window 绑定 上方代码中，方式一和方式二均可以确保：在页面加载完毕后，再执行 js 代码。 +## DOM 操作：设置元素的样式 + + ## 我的公众号 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 diff --git a/05-前端基本功：CSS和DOM练习/06-DOM操作练习：通过style对象设置样式.md b/03-JavaScript基础/25-通过style对象设置行内样式.md similarity index 81% rename from 05-前端基本功：CSS和DOM练习/06-DOM操作练习：通过style对象设置样式.md rename to 03-JavaScript基础/25-通过style对象设置行内样式.md index 68a7d77..0b0f42a 100644 --- a/05-前端基本功：CSS和DOM练习/06-DOM操作练习：通过style对象设置样式.md +++ b/03-JavaScript基础/25-通过style对象设置行内样式.md @@ -1,10 +1,10 @@ -## style属性的设置和获取 +## style属性的获取和修改 在DOM当中，如果想设置样式，有两种形式： -- className（针对内嵌样式表） +- className（针对内嵌样式） - style（针对行内样式） @@ -46,25 +46,59 @@ 上图显示，因为border属性不是行内样式，所以无法通过style对象获取。 -## 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）样式少的时候使用。 +（1）样式少的时候使用。 -- （2）style是对象。 +（2）style是对象。我们在上方已经打印出来，typeof的结果是Object。 -我们在上方已经打印出来，typeof的结果是Object。 +（3）值是字符串，没有设置值是“”。 -- （3）值是字符串，没有设置值是“”。 +（4）命名规则，驼峰命名。 -- （4）命名规则，驼峰命名。和css不一样。 +（5）只能获取行内样式，和内嵌和外链无关。 -- （5）只能获取行内样式，和内嵌和外链无关。 - -本段最开始的时候讲到的。 - -- （6）box.style.cssText = “字符串形式的样式”。 +（6）box.style.cssText = “字符串形式的样式”。 `cssText`这个属性，其实就是把行内样式里面的值当做字符串来对待。在上方代码的基础之上，举例： @@ -85,7 +119,7 @@ style属性需要注意以下几点： ![](http://img.smyhvae.com/20180129_1410.png) -## style的常用属性 +### style的常用属性 style的常用属性包括： @@ -109,29 +143,18 @@ style的常用属性包括： - CSS中：background-color - ## style属性的举例 我们针对上面列举的几个style的样式，来举几个例子： -- 1、改变div的大小和透明度 +- 举例1、改变div的大小和透明度 -- 2、当前输入的文本框高亮显示 +- 举例2、当前输入的文本框高亮显示 -- 3、高级隔行变色、高亮显示 - -- 4、百度皮肤 - -- （继续下面PPT） - -- 显示隐藏/关闭广告/显示二维码（隐藏方法） - -- 提高层级 +- 举例3、高级隔行变色、高亮显示 下面来逐一实现。 - - ### 举例1：改变div的大小和透明度 代码举例： @@ -155,7 +178,6 @@ style的常用属性包括： ``` - ### 举例2：当前输入的文本框高亮显示 代码实现： @@ -206,8 +228,6 @@ style的常用属性包括： ``` - - ### 举例3：高级隔行变色、高亮显示 ```html @@ -367,8 +387,6 @@ style的常用属性包括： ![](http://img.smyhvae.com/20180129_1520.gif) - - 代码解释： 上方代码中，我们**用到了计数器myColor来记录每一行最原始的颜色**（赋值白色之前）。如果不用计数器，可能很多人以为代码是写的：（错误的代码） @@ -406,42 +424,23 @@ style的常用属性包括： ![](http://img.smyhvae.com/20180129_1525.gif) +## 通过 js 获取元素当前显示的样式 -## js 访问css属性 +我们在上面的内容中，通过`元素.style.className`的方式只能获取**行内样式**。但是，有些元素，只写了**内嵌样式或外链样式**。 -访问行内的css样式，有两种方式： +既然样式有这么种，那么，如何获取元素当前显示的样式（包括行内样式、内嵌样式、外链样式）呢？我们接下来看一看。 -方式一： - -```javascript - box.style.width - - box.style.top -``` - -方式二： - -```javascript - 元素.style["属性"]; //格式 - - box.style["width"]; //举例 -``` - -方式二最大的优点是：可以给属性传递参数。 - - -### 获取css的样式 +### 获取元素当前正在显示的样式 上面的内容中，我们通过`box1.style.属性`只能获得**行内样式**的属性。可如果我们想获取**内嵌或者外链**的样式，该怎么办呢？ （1）w3c的做法： ```javascript - window.getComputedStyle("元素", "伪类"); + window.getComputedStyle("要获取样式的元素", "伪元素"); ``` -两个参数都是必须要有的，如果没有伪类就用 null 代替。 - +两个参数都是必须要有的。参数二中，如果没有伪元素就用 null 代替（一般都传null）。 （2）IE和opera的做法： @@ -449,7 +448,15 @@ style的常用属性包括： obj.currentStyle; ``` -于是，就有了一种兼容性的写法，同时将其封装。代码举例如下： +注意： + +- 如果当前元素没有设置该样式，则获取它的默认值。 + +- 该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过`对象.样式名`来读取具体的某一个样式。 + +- 通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性。 + +综合上面两种写法，就有了一种兼容性的写法，同时将其封装。代码举例如下： ```html @@ -491,17 +498,8 @@ style的常用属性包括： ``` - 打印结果： - ![](http://img.smyhvae.com/20180204_1425.png) - - - - - - - diff --git a/03-JavaScript基础/26-事件对象Event和冒泡.md b/03-JavaScript基础/32-事件对象Event和冒泡.md similarity index 100% rename from 03-JavaScript基础/26-事件对象Event和冒泡.md rename to 03-JavaScript基础/32-事件对象Event和冒泡.md diff --git a/03-JavaScript基础/27-事件委托.md b/03-JavaScript基础/33-事件委托.md similarity index 100% rename from 03-JavaScript基础/27-事件委托.md rename to 03-JavaScript基础/33-事件委托.md diff --git a/03-JavaScript基础/28-BOM的常见内置方法和内置对象.md b/03-JavaScript基础/34-BOM的常见内置方法和内置对象.md similarity index 100% rename from 03-JavaScript基础/28-BOM的常见内置方法和内置对象.md rename to 03-JavaScript基础/34-BOM的常见内置方法和内置对象.md diff --git a/03-JavaScript基础/29-原型链.md b/03-JavaScript基础/35-原型链.md similarity index 100% rename from 03-JavaScript基础/29-原型链.md rename to 03-JavaScript基础/35-原型链.md diff --git a/03-JavaScript基础/30-常见代码解读.md b/03-JavaScript基础/36-常见代码解读.md similarity index 100% rename from 03-JavaScript基础/30-常见代码解读.md rename to 03-JavaScript基础/36-常见代码解读.md diff --git a/12-Vue基础/00-Vue的介绍和vue-cli.md b/12-Vue基础/00-Vue的介绍和vue-cli.md index e0759f8..7fbc27f 100644 --- a/12-Vue基础/00-Vue的介绍和vue-cli.md +++ b/12-Vue基础/00-Vue的介绍和vue-cli.md @@ -43,11 +43,6 @@ ## 前端的各种框架 -### Vue.js、React、AngularJS - -AngularJS 提供更多的是一套解决方案，更像是一个生态。 - - Vue 和 React目前都是用了 Virtual Dom。 ### Vue 和 React 的相同点 @@ -118,6 +113,8 @@ Vue框架中，没有控制器。 Vue 本身并不是一个框架，Vue结合周边生态构成一个灵活的、渐进式的框架。 + Vue 以及大型 Vue 项目所需的周边技术，构成了生态。 + 渐进式框架图： ![](http://img.smyhvae.com/20180302_1701.png) diff --git a/12-Vue基础/01-01.Vue的系统指令.md b/12-Vue基础/01-01.Vue的系统指令.md index a958794..acbf29a 100644 --- a/12-Vue基础/01-01.Vue的系统指令.md +++ b/12-Vue基础/01-01.Vue的系统指令.md @@ -35,7 +35,7 @@ Title - + @@ -120,7 +120,7 @@ Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在
content:{{name}}
- +