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