如何用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)

相关推荐