欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

如何用JavaScript去操作HTML元素和CSS样式

程序员文章站 2022-07-02 09:40:26
第3章 你也有控制权（DOM操作） 如何用JavaScript去操作HTML元素和CSS样式，实现简单的动态操作。 3-1 认识DOM 3-2 通过ID获取元素 3-3 innerHTML 属性 3-4 改变 HTML 样式 3-5 显示和隐藏（display属性） 3-6 控制类名（classNa ......

第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>元素节点：&lt;html&gt;、&lt;body&gt;、&lt;p&gt;等都是元素节点，即标签。如图一</li>
11             <li>文本节点:向用户展示的内容，如&lt;li&gt;...&lt;/li&gt;中的javascript、dom、css等文本。</li>
12             <li>属性节点:元素属性，如&lt;a&gt;标签的链接属性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>

上一篇： 荆门小吃有哪些？

下一篇： 南昌大学真的那么不堪吗？南昌大学认可度怎么样？

推荐阅读