如何用JavaScript去操作HTML元素和CSS样式
Posted 我的前端梦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用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>
以上是关于如何用JavaScript去操作HTML元素和CSS样式的主要内容，如果未能解决你的问题，请参考以下文章
图形基础篇02 # 指令式绘图系统：如何用Canvas绘制层次关系图？