亲测可用!

来源:3-6 控制类名(className 属性)

慕瓜0198278

2018-10-05 16:01

<!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 = "co()" >  

    <input type="button" value="改变宽高" onClick = "lon()" >

    <input type="button" value="隐藏内容" onClick = "dis()" >

    <input type="button" value="显示内容" onClick = "play()" >

    <input type="button" value="取消设置" onClick = "con()" >

  </form>

  <script type="text/javascript">

//定义"改变颜色"的函数

    function co(){

        var a = document.getElementById("txt");

        a.style.color = "red";

        a.style.backgroundColor = "#ccc";

    }


//定义"改变宽高"的函数

    function lon(){

        var b = document.getElementById("txt");

        b.style.width = "300px";

        b.style.height ="200px";

    }


//定义"隐藏内容"的函数

    function dis(){

        var c = document.getElementById("txt");

        c.style.display = "none";

    }


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

    function play(){

        var d = document.getElementById("txt");

        d.style.display = "block";

    }


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

    function con(){

        var e = confirm("是否取消设置?")

        if (e == true){

            var f = document.getElementById("txt").style = "none";

        }else {

            return null;

        }

    }

    

  </script>

</body>

</html>


写回答 关注

3回答

  • daai王飞虎
    2018-10-14 10:38:16

    function lon{

    var e=confirm("是否取消设置?");

    if(e==true)

    {

    var eh=documentElementById("txt");

    eh.removeAttribute("style");

    }

    else

    {}

    }

  • 慕虎2525391
    2018-10-07 15:30:14

    <!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 = "con">  

        <input type="button" value="改变宽高" onClick = "lon">

        <input type="button" value="隐藏内容" onClick = "dis">

        <input type="button" value="显示内容" onClick = "play">

        <input type="button" value="取消设置" onClick = "lon">

      </form>

      <script type="text/javascript">

    //定义"改变颜色"的函数

        function con() {

            var a = document.getElementById("txt");

            a.style.color = "#dc143c";

            a.style.backgroundColor = "#ef012a";

        }

    //定义"改变宽高"的函数

        function lon() {

            var b = document.getElementById("txt");

            b.style.width = "300px";

            b.style.height = "450px";

        }

    //定义"隐藏内容"的函数

        function dis() {

            var c = document.getElementById("txt");

            c.style.display = "none";

        }

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

        function play() {

            var d = document.getElementById("txt");

            d.style.display = "block";

        }

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

        function lon() {

            var e = confirm("是否取消设置?")

            if (e == true) {

                var f = document.getElementById("txt").style = "none";

            }else{

            return null;

            }

        }


      </script>

    </body>

    </html>

    我想知道为什么我这个点击按钮出不来效果呢?

  • 不动产金牌投资顾问
    2018-10-07 15:21:50
    <!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="cua()"/>
      <input type="button" value="改变宽高" onclick="cuc()"/>
      <input type="button" value="隐藏内容" onclick="cuab()"/>
      <input type="button" value="显示内容" onclick="cuaa()"/>
      <input type="button" value="取消设置" onclick="cu()"/>
    </form>
    <script type="text/javascript">
      function cua() {
         mychar = document.getElementById("txt");//定义"改变颜色"的函数
        mychar.style.color = "red";
      }
      function cuc(){
         mychar=document.getElementById("txt");
        mychar.style.width = "300px";
        mychar.style.height = "400px";//定义"改变宽高"的函数
      }
        function cuab(){
           mychar=document.getElementById("txt");
          mychar.style.display="none";//定义"隐藏内容"的函数
        }
        cuab();
        function cuaa(){
         mychar=document.getElementById("txt");
        mychar.style.display="block";//定义"显示内容"的函数
        }
    cuaa();
        function cu() {
        var cu=confirm("你确定还原设置吗?");
        if(cu==true)
        {
          var mychar=document.getElementById("txt")
          mychar.style.height="400px";
          mychar.style.width="600px";
          mychar.style.border="#333 solid 1px";
          mychar.style.padding="5px";
          mychar.style.color="black"
            mychar.style.lineheight="18px";
          mychar.style.textindent="2em";
        mychar.style.display="block";
        }
        else
          {
            return
          }
          }
    </script>
    </body>
    </html>


JavaScript入门篇

JavaScript做为一名Web工程师的必备技术,本教程让您快速入门

739817 学习 · 9566 问题

查看课程

相似问题