add: 通过 js 获取元素的样式
This commit is contained in:
qianguyihao
parent
5da19e6ed8
commit
0bb33431a3
@ -636,6 +636,9 @@ onload 事件会在整个页面加载完成之后才触发。为 window 绑定
|
|||||||
|
|
||||||
上方代码中，方式一和方式二均可以确保：在页面加载完毕后，再执行 js 代码。
|
上方代码中，方式一和方式二均可以确保：在页面加载完毕后，再执行 js 代码。
|
||||||
|
|
||||||
|
## DOM 操作：设置元素的样式
|
||||||
|
|
||||||
|
|
||||||
## 我的公众号
|
## 我的公众号
|
||||||
|
|
||||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
|
|
||||||
|
|
||||||
## style属性的设置和获取
|
## style属性的获取和修改
|
||||||
|
|
||||||
在DOM当中，如果想设置样式，有两种形式：
|
在DOM当中，如果想设置样式，有两种形式：
|
||||||
|
|
||||||
- className（针对内嵌样式表）
|
- className（针对内嵌样式）
|
||||||
|
|
||||||
- style（针对行内样式）
|
- style（针对行内样式）
|
||||||
|
|
||||||
@ -46,25 +46,59 @@
|
|||||||
|
|
||||||
上图显示，因为border属性不是行内样式，所以无法通过style对象获取。
|
上图显示，因为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属性需要注意以下几点：
|
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`这个属性，其实就是把行内样式里面的值当做字符串来对待。在上方代码的基础之上，举例：
|
`cssText`这个属性，其实就是把行内样式里面的值当做字符串来对待。在上方代码的基础之上，举例：
|
||||||
@ -85,7 +119,7 @@ style属性需要注意以下几点：
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
## style的常用属性
|
### style的常用属性
|
||||||
|
|
||||||
style的常用属性包括：
|
style的常用属性包括：
|
||||||
|
|
||||||
@ -109,29 +143,18 @@ style的常用属性包括：
|
|||||||
|
|
||||||
- CSS中：background-color
|
- CSS中：background-color
|
||||||
|
|
||||||
|
|
||||||
## style属性的举例
|
## style属性的举例
|
||||||
|
|
||||||
我们针对上面列举的几个style的样式，来举几个例子：
|
我们针对上面列举的几个style的样式，来举几个例子：
|
||||||
|
|
||||||
- 1、改变div的大小和透明度
|
- 举例1、改变div的大小和透明度
|
||||||
|
|
||||||
- 2、当前输入的文本框高亮显示
|
- 举例2、当前输入的文本框高亮显示
|
||||||
|
|
||||||
- 3、高级隔行变色、高亮显示
|
- 举例3、高级隔行变色、高亮显示
|
||||||
|
|
||||||
- 4、百度皮肤
|
|
||||||
|
|
||||||
- （继续下面PPT）
|
|
||||||
|
|
||||||
- 显示隐藏/关闭广告/显示二维码（隐藏方法）
|
|
||||||
|
|
||||||
- 提高层级
|
|
||||||
|
|
||||||
下面来逐一实现。
|
下面来逐一实现。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 举例1：改变div的大小和透明度
|
### 举例1：改变div的大小和透明度
|
||||||
|
|
||||||
代码举例：
|
代码举例：
|
||||||
@ -155,7 +178,6 @@ style的常用属性包括：
|
|||||||
</body>
|
</body>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
### 举例2：当前输入的文本框高亮显示
|
### 举例2：当前输入的文本框高亮显示
|
||||||
|
|
||||||
代码实现：
|
代码实现：
|
||||||
@ -206,8 +228,6 @@ style的常用属性包括：
|
|||||||
</html>
|
</html>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 举例3：高级隔行变色、高亮显示
|
### 举例3：高级隔行变色、高亮显示
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@ -367,8 +387,6 @@ style的常用属性包括：
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
代码解释：
|
代码解释：
|
||||||
|
|
||||||
上方代码中，我们**用到了计数器myColor来记录每一行最原始的颜色**（赋值白色之前）。如果不用计数器，可能很多人以为代码是写的：（错误的代码）
|
上方代码中，我们**用到了计数器myColor来记录每一行最原始的颜色**（赋值白色之前）。如果不用计数器，可能很多人以为代码是写的：（错误的代码）
|
||||||
@ -406,42 +424,23 @@ style的常用属性包括：
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 通过 js 获取元素当前显示的样式
|
||||||
|
|
||||||
## js 访问css属性
|
我们在上面的内容中，通过`元素.style.className`的方式只能获取**行内样式**。但是，有些元素，只写了**内嵌样式或外链样式**。
|
||||||
|
|
||||||
访问行内的css样式，有两种方式：
|
既然样式有这么种，那么，如何获取元素当前显示的样式（包括行内样式、内嵌样式、外链样式）呢？我们接下来看一看。
|
||||||
|
|
||||||
方式一：
|
### 获取元素当前正在显示的样式
|
||||||
|
|
||||||
```javascript
|
|
||||||
box.style.width
|
|
||||||
|
|
||||||
box.style.top
|
|
||||||
```
|
|
||||||
|
|
||||||
方式二：
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
元素.style["属性"]; //格式
|
|
||||||
|
|
||||||
box.style["width"]; //举例
|
|
||||||
```
|
|
||||||
|
|
||||||
方式二最大的优点是：可以给属性传递参数。
|
|
||||||
|
|
||||||
|
|
||||||
### 获取css的样式
|
|
||||||
|
|
||||||
上面的内容中，我们通过`box1.style.属性`只能获得**行内样式**的属性。可如果我们想获取**内嵌或者外链**的样式，该怎么办呢？
|
上面的内容中，我们通过`box1.style.属性`只能获得**行内样式**的属性。可如果我们想获取**内嵌或者外链**的样式，该怎么办呢？
|
||||||
|
|
||||||
（1）w3c的做法：
|
（1）w3c的做法：
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
window.getComputedStyle("元素", "伪类");
|
window.getComputedStyle("要获取样式的元素", "伪元素");
|
||||||
```
|
```
|
||||||
|
|
||||||
两个参数都是必须要有的，如果没有伪类就用 null 代替。
|
两个参数都是必须要有的。参数二中，如果没有伪元素就用 null 代替（一般都传null）。
|
||||||
|
|
||||||
|
|
||||||
（2）IE和opera的做法：
|
（2）IE和opera的做法：
|
||||||
|
|
||||||
@ -449,7 +448,15 @@ style的常用属性包括：
|
|||||||
obj.currentStyle;
|
obj.currentStyle;
|
||||||
```
|
```
|
||||||
|
|
||||||
于是，就有了一种兼容性的写法，同时将其封装。代码举例如下：
|
注意：
|
||||||
|
|
||||||
|
- 如果当前元素没有设置该样式，则获取它的默认值。
|
||||||
|
|
||||||
|
- 该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过`对象.样式名`来读取具体的某一个样式。
|
||||||
|
|
||||||
|
- 通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性。
|
||||||
|
|
||||||
|
综合上面两种写法，就有了一种兼容性的写法，同时将其封装。代码举例如下：
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
@ -491,17 +498,8 @@ style的常用属性包括：
|
|||||||
</html>
|
</html>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
打印结果：
|
打印结果：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -43,11 +43,6 @@
|
|||||||
|
|
||||||
## 前端的各种框架
|
## 前端的各种框架
|
||||||
|
|
||||||
### Vue.js、React、AngularJS
|
|
||||||
|
|
||||||
AngularJS 提供更多的是一套解决方案，更像是一个生态。
|
|
||||||
|
|
||||||
Vue 和 React目前都是用了 Virtual Dom。
|
|
||||||
|
|
||||||
### Vue 和 React 的相同点
|
### Vue 和 React 的相同点
|
||||||
|
|
||||||
@ -118,6 +113,8 @@ Vue框架中，没有控制器。
|
|||||||
|
|
||||||
Vue 本身并不是一个框架，Vue结合周边生态构成一个灵活的、渐进式的框架。
|
Vue 本身并不是一个框架，Vue结合周边生态构成一个灵活的、渐进式的框架。
|
||||||
|
|
||||||
|
Vue 以及大型 Vue 项目所需的周边技术，构成了生态。
|
||||||
|
|
||||||
渐进式框架图：
|
渐进式框架图：
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -35,7 +35,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Title</title>
|
<title>Title</title>
|
||||||
<!--1、导入Vue的包-->
|
<!--1、导入Vue的包-->
|
||||||
<script src="vue2.5.15.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!--这个div区域就是MVVM中的 View-->
|
<!--这个div区域就是MVVM中的 View-->
|
||||||
@ -120,7 +120,7 @@ Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在
|
|||||||
<div id="app">
|
<div id="app">
|
||||||
<span>content:{{name}}</span>
|
<span>content:{{name}}</span>
|
||||||
</div>
|
</div>
|
||||||
<script src="vue2.5.16.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
|
||||||
<script>
|
<script>
|
||||||
var vm = new Vue({
|
var vm = new Vue({
|
||||||
el: '#app',
|
el: '#app',
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user