Javascript_Note.4

来源：互联网发布：逛淘宝需要多少流量编辑：程序博客网时间：2024/06/05 14:18
JavaScript基础学习，下面代码中的的取消设置没写，有懂的指点一下吧~
<!DOCTYPE HTML><html><head><title>Javascript_Note.4</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link href="easy.css" rel="stylesheet" type="text/css"><link href="test.css" rel="stylesheet" type="text/css"><style>    body{ font-size:16px;}    .one{border:1px solid #eee;width:230px;height:50px;background:#ccc;color:red;    }.two{border:1px solid #ccc;width:230px;height:50px;background:#9CF;color:blue;}#txt{    height:400px;    width:600px;border:#333 solid 1px;padding:5px;}p{line-height:18px;text-indent:2em;}</style></head><body><!--~~~~~~~~~~~更改选择器名~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--><div><h3>className 属性，更改选择器名</h3>    <script type="text/javascript">   function add(){      var p1 = document.getElementById("p1");   p1.className="one";      }   function modify(){      var p2 = document.getElementById("p2");   p2.className="two";      }</script><p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>    <input type="button" value="添加样式" onclick="add()"/><p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>    <input type="button" value="更改外观" onclick="modify()"/></div>    <!--注意          语法：object.className = classname          作用是：1.获取元素的class 属性  2.为网页内的某个元素指定一个css样式来更改该元素的外观--><!--~~~~~~~~~~~编程练习~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--><div><h3>编程练习</h3><h2 id="con">JavaScript课程</H2>    <div id="txt">     <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>       <p>1. JavaScript入门篇</p>       <p>2. JavaScript进阶篇</p>       <p>3. 学完以上两门基础课后</p>  </div>  <form>  <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->    <input type="button"  onclick="colorchange()" value="改变颜色" >      <input type="button" onclick="widthchange()" value="改变宽高" >    <input type="button" onclick="hide()" value="隐藏内容" >    <input type="button" onclick="show()" value="显示内容" >    <input type="button" value="取消设置" >  </form>  <script type="text/javascript">    function colorchange(){    //定义"改变颜色"的函数      var txt= document.getElementById("con");    txt.style.color="blue";}    function widthchange(){    //定义"改变宽高"的函数    var txt2= document.getElementById("txt");    txt2.style.width="200px";}//定义"隐藏内容"的函数    function hide(){    var hid= document.getElementById("txt");    hid.style.display="none";}//定义"显示内容"的函数    function show(){    var hid= document.getElementById("txt");    hid.style.display="block";}//定义"取消设置"的函数  </script></div>    <!--注意         --></body></html>
0 0