                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript入门篇

编程练习求大神修改

<!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

源自：JavaScript入门篇 4-1

关注问题我要回答

658

操作

收起

4 回答

Ready_鞠
2016-12-07

<!DOCTYPE HTML>

<html>

<head>

<title>javascript</title>

body{font-size:12px;}

#txt{

height:400px;

width:600px;

border:#333 solid 1px;

padding:5px;}

line-height:18px;

text-indent:2em;}

</style>

</head>

<body>

<h2 id="con">JavaScript课程</H2>

<h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>

<p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>

<p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>

<p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>

</div>

<form>

</form>

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

<!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

0 回复有任何疑惑可以回复我~

收起回答

我不是管家

1:input标签有个onclick写错了， 2:改变宽高的函数中，这是错误写法“p2.style.width=290px;p2.style.height=50px;” 正确写法是“p2.style.width='290px';p2.style.height='50px';”一定要加引号，至于单还是双引号并没有什么区别 3，重置函数不是简单的吧属性赋值为空，而是要赋值为之前的css属性

2016-12-06 回复有任何疑惑可以回复我~