如何用JavaScript去操作HTML元素和CSS样式
第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 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>认识DOM</title> 6 </head> 7 <body> 8 <p>HTML文档可以说由节点构成的集合，三种常见的DOM节点:</p> 9 <ol> 10 <li>元素节点：<html>、<body>、<p>等都是元素节点，即标签。如图一</li> 11 <li>文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。</li> 12 <li>属性节点:元素属性，如<a>标签的链接属性href="http://www.dhnblog.com/"。如图二</li> 13 </ol> 14 <p><img src="images/demo3-1-1.jpg" title="图一"></p> 15 <p><img src="images/demo3-1-2.jpg" title="图二"></p> 16 </body> 17 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>通过ID获取元素</title>
6 </head>
7 <body>
8 <h3>hello</h3>
9 <p id='con'>i love javascript</p>
10 <p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p>
11 <script>
12 // document.getElementById("id")
13 var mystr=document.getElementById('con');
14 document.write(mystr);
15 /*
16 object HTMLParagraphElement 对象 HTML段落元素，获取到的是元素，这个元素也就是对象，
17 获取到的对象不会显示里面的值，所以显示object HTMLParagraphElement，想要抽取出里面的值，就用 innerHTML 获取
18 获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。
19 */
20 </script>
21 </body>
22 </html>
1 <!DOCTYPE>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>innerHTML 属性</title>
6 <!-- <script type="text/javascript">
7 // Object.innerHTML//语法
8 var mycon=document.getElementById('con');
9 document.write('P标签原始内容:'+mycon.innerHTML+'<br >');
10 mycon.innerHTML="今天阳光明媚";
11 document.write('P标签现在内容:'+mycon.innerHTML+'<br >');
12 </script> -->
13 </head>
14 <body>
15 <p id="con">你好4月份</p>
16 <p>当js写在这个头部，报错Uncaught TypeError: Cannot read property 'innerHTML' of null</p>
17 <!-- 浏览器截图效果展示 -->
18 <p><img src="images/demo3-3-1.jpg" ></p>
19 <p><img src="images/demo3-3-2.jpg" ></p>
20 </body>
21
22 <script type="text/javascript">
23 // Object.innerHTML//语法
24 var mycon=document.getElementById('con');
25 document.write('P标签原始内容:'+mycon.innerHTML+'<br >');
26 mycon.innerHTML="今天阳光明媚";
27 document.write('P标签现在内容:'+mycon.innerHTML+'<br >');
28 </script>
29 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>改变 HTML 样式</title>
6 <script type="text/javascript">
7 // Object.style.property=new style;
8 // Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
9 // property属性
10 </script>
11 </head>
12 <body>
13 <p id="con">hello world</p>
14 <script type="text/javascript">
15 var mycon=document.getElementById('con');
16 mycon.style.color='#fff';
17 mycon.style.fontSize='18px';
18 mycon.style.backgroundColor='green';
19 </script>
20 <p>基本属性表（property）:</p>
21 <img src="images/demo3-4-1.jpg" >
22 <img src="images/demo3-4-2.jpg" >
23 </body>
24 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>显示和隐藏（display属性）</title>
6 </head>
7 <body>
8 <p id="ceshi">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>
9 <script type="text/javascript">
10 // Object.style.display = value
11 var ceshi=document.getElementById('ceshi');
12 function ceshi1(){
13 ceshi.style.display='none';
14 }
15 function ceshi2(){
16 ceshi.style.display='block';
17 }
18 </script>
19 <form action="" method="">
20 <input type="button" name="" id="" value="显示内容" onclick="ceshi2()"/>
21 <input type="button" name="" id="" value="隐藏内容" onclick="ceshi1()"/>
22 </form>
23 <p>value取值:</p>
24 <img src="images/demo3-5-1.jpg" >
25 <p>代码展示:</p>
26 <img src="images/demo3-5-2.jpg" >
27 </body>
28 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>控制类名（className 属性）</title>
6 <script type="text/javascript">
7 /*object.className = classname
8 1.获取元素的class 属性
9 2. 为网页内的某个元素指定一个css样式来更改该元素的外观*/
10 </script>
11 <style type="text/css">
12 .mychang{
13 color: #fff;
14 background-color: #f90;
15 height: 60px;
16 width: 80%;
17 line-height: 60px;
18 font-size: 16px;
19 }
20 .ceshi{
21 font-size: 18px;
22 color: #008000;
23 }
24 </style>
25 </head>
26 <body>
27 <p id="add"> JavaScript使网页显示动态效果并实现与用户交互功能</p>
28 <input type="button" name="" id="" value="添加样式" onclick="myadd()"/>
29 <h3 id="change" class="one">JavaScript使网页显示动态效果并实现与用户交互功能</h3>
30 <input type="button" name="" id="" value="更改外观" onclick="mychange()"/>
31 <script type="text/javascript">
32 function myadd(){
33 document.getElementById('add').className='ceshi'
34 }
35 function mychange(){
36 document.getElementById('change').className='mychang';
37 }
38 </script>
39 </body>
40 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>控制类名（className 属性）补充</title>
6 <style type="text/css">
7 .one{
8 font-size: 14px;
9 width: 200px;
10 color: red;
11 }
12 .two{
13 font-size: 20px;
14 width: 400px;
15 color: green;
16 }
17 </style>
18 </head>
19 <body>
20 <p id="str" class="one">郁闷,又丢了U盘</p>
21 <form action="" method="">
22 <input type="button" name="" id="" value="点击更改" onclick="modifyclass()"/>
23 </form>
24 <script type="text/javascript">
25 var mystr=document.getElementById('str');
26 document.write('p元素的class值为:'+mystr.className+'<br />')
27 function modifyclass(){
28 mystr.className='two'
29 }
30 </script>
31 <p>代码展示:</p>
32 <img src="images/demo3-6-1.jpg" >
33 <img src="images/demo3-6-2.jpg" >
34 </body>
35 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="txttent-Type" txttent="text/html; charset=gb2312" />
5 <title>style样式</title>
6 <style type="text/css">
7 *{ font-size:12px;}
8 #txt{
9 height:400px;
10 width:600px;
11 border:#333 solid 1px;
12 padding:5px;
13
14 }
15 p{
16 line-height:18px;
17 text-indent:2em;}
18 </style>
19 </head>
20 <body>
21 <h2 id="con">JavaScript课程</H2>
22 <div id="txt">
23 <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
24 <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
25 <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
26 <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
27
28 </div>
29 <form>
30 <input type="button" value="改变颜色" onClick="dcolor()">
31 <input type="button" value="改变宽高" onClick="dwh()">
32 <input type="button" value="隐藏内容" onClick="dh()">
33 <input type="button" value="显示内容" onClick="ds()">
34 <input type="button" value="恢复" onClick="dclear()">
35
36 </form>
37 <script type="text/javascript">
38 function dcolor(){
39 var mychar = document.getElementById("txt");
40 mychar.style.color="red";
41 mychar.style.backgroundColor="#ccc";
42 }
43
44 function dwh(){
45 var mychar = document.getElementById("txt");
46 mychar.style.width="400px";
47 mychar.style.height="200px";
48 }
49
50 function dh(){
51 var mychar = document.getElementById("txt");
52 mychar.style.display="none";
53 }
54
55 function dclear(){
56 if(confirm("确定要取消设置吗?")){
57 var mychar = document.getElementById("txt");
58 mychar.style.color="#000";
59 mychar.style.backgroundColor="#fff";
60 mychar.style.width="600px";
61 mychar.style.height="400px";
62 mychar.style.display="block";
63 }
64 }
65 function ds(){
66 var mychar = document.getElementById("txt");
67 mychar.style.display="block";
68 }
69 </script>
70 </body>
71
72 </html>
赞 (0)