前端实战——第一课

时间：2022-10-19 20:04:13

找到一个不错的网站：http://www.fgm.cc/learn/ 有很多用原生JS写的有意思的东西，之后会把每个小例子的实现代码分享出来。

我的方法是，读题目之后先自己写，写到效果差不多后去F12看源码。然后比较自己的和源码的写法，取长补短。

（1）控制div属性

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>控制div属性</title>
  <style>
  #square{
  width:100px;
  height:100px;
  background:red;
  margin:10px auto;
  }
  #outer{
  text-align:center; 
  }
  </style>
  <script>
  function changeStyle(ele,sty,va){
      ele.style[sty]=va;
  }
  window.onload=function(){
      var butt=document.getElementsByTagName("button");
      var design=document.getElementById("square");
      var oAtt=["width","height","background","display","display"];
      var oVal=["200px","200px","blue","none","block"]
      for (var i=0;i<butt.length ;i++ )
      {
          butt[i].index=i;
          butt[i].onclick=function(){
              if (this.index==butt.length-1)//if语句可以换成：this.index==butt.length-1 && (design.style.cssText="");
                  design.style.cssText=""; 
              changeStyle(design,oAtt[this.index],oVal[this.index]);
          }
      }
  }
  </script>
 </head>
 <body>
 <div id="outer">
 <button type="button">变宽</button>//input 标签也能实现botton的作用。
 <button type="button">变高</button>
 <button type="button">变色</button>
 <button type="button">隐藏</button>
 <button type="button">重置</button>
 <div id="square"></div>
  </div>
 </body>
</html>

（2）网页换肤

————未完待续————

 

标签：

相关文章