< 返回新闻公共列表
云南大王-如何用JavaScript去操作HTML元素和CSS样式
发布时间:2020-04-13 00:00:00
第3章 你也有控制权(DOM操作)
如何用JavaScript去操作HTML元素和CSS样式,实现简单的动态操作。
3-1 认识DOM
3-2 通过ID获取元素
3-3 innerHTML 属性
3-4 改变 HTML 样式
3-5 显示和隐藏(display属性)
3-6 控制类名(className 属性)
第4章 编程挑战
不断实践,提高技能。
4-1 编程挑战
1
2
3
4
5
认识DOM
6
7
8
HTML文档可以说由节点构成的集合,三种常见的DOM节点:
9
10 - 元素节点:<html>、<body>、<p>等都是元素节点,即标签。如图一
11 - 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
12 - 属性节点:元素属性,如<a>标签的链接属性href="http://www.dhnblog.com/"。如图二
13
14

15

16
17
1
2
3
4
5
通过ID获取元素
6
7
8
hello
9
i love javascript
10
JavaScript是一种基于对象、事件驱动的简单脚本语言,嵌入在HTML文档中,由浏览器负责解释和执行,在网页上产生动态的显示效果并实现与用户交互功能。
11
21
22
1
2
3
4
5
innerHTML 属性
6
13
14
15
你好4月份
16
当js写在这个头部,报错Uncaught TypeError: Cannot read property 'innerHTML' of null
17
18

19

20
21
22
29
1
2
3
4
5
改变 HTML 样式
6
11
12
13
hello world
14
20
基本属性表(property):
21

22

23
24
1
2
3
4
5
显示和隐藏(display属性)
6
7
8
做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。
9
19
23
value取值:
24

25
代码展示:
26

27
28
1
2
3
4
5
控制类名(className 属性)
6
11
25
26
27
JavaScript使网页显示动态效果并实现与用户交互功能
28
29
JavaScript使网页显示动态效果并实现与用户交互功能
30
31
39
40
1
2
3
4
5
控制类名(className 属性)补充
6
18
19
20
郁闷,又丢了U盘
21
24
31
代码展示:
32

33

34
35
1
2
3
4
5
style样式
6
19
20
21
JavaScript课程
22
23
JavaScript为网页添加动态效果并实现与用户交互的功能。
24
1. JavaScript入门篇,让不懂JS的你,快速了解JS。
25
2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。
26
3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。
27
28
29
37
70
71
72