问答详情
源自:4-1 编程挑战

为什么取消设置函数没有效果?跪求解答

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
    height:400px;
    width:600px;
	border:#333 solid 1px;
	padding:5px;}
.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" class="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="changeColor()" >  
    <input type="button" value="改变宽高" onclick="changeHW()" >
    <input type="button" value="隐藏内容" onclick="hideTxt()" >
    <input type="button" value="显示内容" onclick="showTxt()" >
    <input type="button" value="取消设置" onclick="cancelStyle()" >
  </form>
  <script type="text/javascript">
//定义"改变颜色"的函数
var myChar=document.getElementById("txt");
function changeColor(){
    myChar.style.color="pink";
    myChar.style.backgroundColor="green";
}
//定义"改变宽高"的函数
function changeHW(){
    myChar.style.width="300px";
    myChar.style.height="600px";
}

//定义"隐藏内容"的函数
function hideTxt(){
     myChar.style.display="none";
}

//定义"显示内容"的函数
function showTxt(){
     myChar.style.display="block";
}

//定义"取消设置"的函数
function cancelStyle(){
    var myMessage=confirm("您要取消所有设置吗?");
    if(myMessage == true){
        mychar.className="txt";
    }
    else{
        alert("还是原来的样式");
    }
}


  </script>
</body>
</html>


提问者:张渣渣lalala 2016-06-01 08:16

个回答

  • 以晓之明
    2016-06-01 09:38:50
    已采纳

    前4个点击操作是修改了对象的style属性,className始终都是txt,重新给类名赋值不能达到“取消设置”的效果,可以通过removeAttribute("style")操作实现这个效果

  • qq_阳光斜影_03450181
    2016-06-04 23:38:12

    通过obj.style.attribute写的样式都是写到行间的,其实样式表中的样式没变只是行间的优先级高,所以你删除className='txt',标签中的行间样式一样还是存在。

  • dafengzi
    2016-06-01 09:26:47

    mychar.className="txt";  只是改变类名,不影响之前的样式。  应该mychar.removeAttribute("style");


    还有 myMessage本身就是boolean,不用再==了

  • qq_我还是个孩子_1
    2016-06-01 09:18:58

    if(myMessage == true){
            mychar..removeAttribute("style");
        }