<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js练习</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:13px;}
.one{ width:500px; margin:0 auto; padding-left:20px; height:300px; border:1px solid #000; line-height:1.8em;}
h2{ text-align:center;}
form{text-align:center; line-height:50px;}
</style>
</head>
<body>
<h2>JavaScript 练习！</h2>
<div id="text" class="one">
<h5>Javascrip为网页添加动态效果并实现与用户交互的功能！</h5>
<p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
<p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器</p>
<p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
</div>
<form>
<input name="button" type="button" onclick="changecolor()" value="改变颜色" />
<input name="button" type="button" onclick="changewh()" value="改变宽高" />
<input name="button" type="button" onclick="hiddencontent()" value="隐藏内容" />
<input name="button" type="button" onclick="showcontent()" value="显示内容" />
<input name="button" type="button" onclick="cancle()" value="取消设置" />
</form>
<script type="text/javascript">
var myartcle=document.getElementById("text");
function changecolor(){
myartcle.style.color="red";
}
function changewh(){
myartcle.style.width="600px";
myartcle.style.height="350px";
}
function hiddencontent(){
myartcle.style.display="none";
}
function showcontent(){
myartcle.style.display="block";
}
function cancle(){
var canc=confirm("确认取消设置吗？");
if(canc==ture){
myartcle.className="one";
}
}
</script>
</body>
</html>
注意:if(canc==ture)中的这个ture写错，应该是true.同时要考虑css的优先级顺序:
下列是一份优先级逐级增加的选择器列表:
通用选择器*
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式
所以把className改成style方式试一试。