编程练习求大神修改

源自：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;}
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"   onclick="change_color() " value="改变颜色">
    <input type="button" onclick="change_width_height() " value="改变宽高" >
    <input type="button" onclick="hidden()" value="隐藏内容" >
    <input type="button" onclick="block() " value="显示内容" >
    <input type="button" nclick="quxiao() " value="取消设置" o >
</form>
<script type="text/javascript">
//定义"改变颜色"的函数
function change_color()
{
    var p1=document.getElementById("con");
    p1.style.color="red";
    p1.style.backgroundColor="yellow";
}

//定义"改变宽高"的函数
function change_width_height()
{
    var p2=document.getElementById("txt");
    p2.style.width=290px;
    p2.style.height=50px;
}

//定义"隐藏内容"的函数
function hidden()
{
    var p3=document.getElementById("con");
    p3.style.display="none";

}

//定义"显示内容"的函数

function block()
{
    var p4=document.getElementById("con");
    p4.style.display="block";

}
//定义"取消设置"的函数

function quxiao()
{
    var p5=confirm("取消设置：")
    if(p5==true)
    var p5=document.getElementById("con");
    p5.style.color="none";
    p5.style.backgroundColor="none";
      p5.style.width="none";
    p5.style.height="none";
}

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

提问者：慕圣3502468 2016-12-05 12:25

个回答

Ready_鞠

2016-12-07 14:21:12

<!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;}
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="changeColor()" >
<input type="button" value="改变宽高" onclick="changeWidthHeight()">
<input type="button" value="隐藏内容" onclick=" hideText()" >
<input type="button" value="显示内容" onclick="xianshi()" >
<input type="button" value="取消设置" onclick="exit()">
</form>
<script type="text/javascript">
var txt=document.getElementById("txt");
//定义"改变颜色"的函数
function changeColor(){
txt.style.color="red";
txt.style.backgroundColor="#ccc";
}

//定义"改变宽高"的函数
function changeWidthHeight(){
txt.style.width="200px";
txt.style.height="200px";
}

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

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

}

//定义"取消设置"的函数
function exit(){
var exit=confirm("是否取消设置？");
if(exit==true){
txt.style.color="#000";
txt.style.backgroundColor="#fff";
txt.style.width="600px";
txt.style.height="400px";
txt.style.display="block";
}
}

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

你的代码里面有一些问题，首先最明显的是后面的取消设置的函数里面的重置，是需要把前面改变掉的样式恢复到之前的那样，所以只要按照.txt的css样式变回来就可以实现了。
还有就是你获取的id,你自己需要对哪个标签操作，你就用哪个ID，现在建议你只需要对一个ID进行操作就可以了，这样简洁明了。

0

我不是管家: 2016-12-06 15:57:06

<!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;}
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"   onclick="change_color()" value="改变颜色">  
    <input type="button"  onclick="change_width_height() "  value="改变宽高" >
    <input type="button"  onclick="dhidden()"  value="隐藏内容"  >
    <input type="button"  onclick="block() " value="显示内容"  >
    <input type="button"  onclick="quxiao() " value="取消设置" >
  </form>
  <script type="text/javascript">
//定义"改变颜色"的函数
function change_color()
{
    var p1=document.getElementById('txt');

    p1.style.color="red";
    p1.style.backgroundColor="yellow";
}

//定义"改变宽高"的函数
function change_width_height()
{
    var p2=document.getElementById("txt");
    p2.style.width='290px';
    p2.style.height='50px';
}

//定义"隐藏内容"的函数
function hidden()
{
    var p3=document.getElementById("con");
    alert(p3);
    p3.style.display="none";
  
}

//定义"显示内容"的函数

function block()
{
    var p4=document.getElementById("con");
    p4.style.display="block";
  
}
//定义"取消设置"的函数

function quxiao()
{
    var p5=confirm("取消设置：")
    if(p5==true){
    var p6=document.getElementById("con");
     var p7=document.getElementById("txt")
      p7.style.color="black";
    p7.style.backgroundColor="white";
    p7.style.width='600px';
    p7.style.height='400px';
    p6.style.display="block";
    }
}

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

我基本上把你的代码都改回来了，虽然我不知道你去id为什么一下con一下txt

我不是管家

2016-12-06 15:53:07

吐槽点太多

0
慕桂英0853240

2016-12-05 14:43:07

<input type="button" nclick="quxiao() " value="取消设置" o >1.应该为onclick，2.input标签里面多了o

0