JS 函数封装（今天代码超多bug 要慢慢改了，所以只更新一点点吧）

只能获取行间样式 ： 标签.style.样式名
获取非行间样式
标准浏览器：getComputedStyle(标签).样式名
IE浏览器：标签.currentStyle.样式名

//2.标准浏览器：getComputedStyle(标签).样式名
var width = getComputedStyle(oDiv).width;
alert(width);
//3. IE浏览器：标签.currentStyle.样式名
var width = oDiv.currentStyle.width;
alert(width);
/*

4.兼容（方法[函数]的兼容）
方式：拿其中一个方法作为判断条件，如果有这个方法，就用，没有就用另外一个 xx.xx
如果方法是直接调用的[开头直接是xx()],前面加window

*/
/* if(oDiv.currentStyle){
var width = oDiv.currentStyle.width;
}else{
var width = getComputedStyle(oDiv).width;
}
*/
if(window.getComputedStyle){
var width = getComputedStyle(oDiv).width;
}else{
var width = oDiv.currentStyle.width;

• this的概念

  • this:当前这个，一般在函数中出现，出现位置不一样，代表的值也不一样，取决于当前调用函数时所处的环境

  • 在普通函数中this -----> window

  • 在事件函数中this -----> 当前触发事件的对象(标签) 点谁是谁

  • 在对象的方法中this ---> 指当前对象

    //1.普通函数  (所有的全局变量和全局函数都属于window)
    function sum(){
        console.log(this);
    }
    window.sum();
    var a = 10;
    console.log(window.a);  //一般省略window
    ​
    //2.在事件函数中this ----->  当前触发事件的对象(标签)    点谁是谁
    var oBtns = document.getElementsByTagName("button");
    for(var i = 0;i<oBtns.length;i++){ //循环添加点击事件的时候，事件里面不会执行
        oBtns[i].onclick = function(){
            console.log(this);
            alert(this.innerText);
        }
    }
    ​
    //3.在对象的方法中this --->指当前对象
    var txf = {
        "name":"小芳",
        "skill":function(){
            console.log("敲代码");
            console.log(this); //当前对象
        }
    }
    txf.skill();

开关效果

• 开关效果：一个标签两种状态

• 实现思路：定义一个状态标识，tag = true，点击的时候判断tag的值

  //1.获取元素
  var oImg = document.getElementsByTagName("img")[0];
  ​
  //如果判断找不到的判断条件，自己创造一个条件
  var tag = true;  //true----关     false-----开
  ​
  //2.点击图片
  oImg.onclick = function(){
      console.log(oImg.src); //获取的是绝对地址
      if(tag == true){
          oImg.src = "./images/bright.jpg";
          tag = false;
      }else{
          oImg.src = "./images/dark.jpg";
          tag = true;
      } 
  }

自定义属性

5.1 自定义属性

• 属性分类：

  • 固有属性：系统定义好的 id class title src name

  • 自定义属性：程序员自己定义的 tag

• 属性操作

  • 获取：var a = 标签.属性名

  • 设置：标签.属性名 = 属性值

  var oDiv = document.getElementsByTagName("div")[0];
  ​
  //1.可以在标签上直观看到，但是暂时获取不到直接写在行间的自定义属性
  var t = oDiv.tag;
  console.log(t); //undefined
  ​
  //2.在js中给标签自定义属性,在标签上看不到，但是可以获取使用
  oDiv.a = true;
  console.log(oDiv.a);

5.2 自定义属性的使用场景

• 多组开关效果

  //2.循环添加点击事件
  for (var i = 0; i < oDiv.length; i++) {
      oDiv[i].tag = true; //添加自定义属性，给每个标签都添加一个自己的属性
      oDiv[i].onclick = function () {
          if (this.tag == true) { //点击获取对应标签的属性状态进行判断
              this.style.height = "100px";
              this.tag = false;
          } else {
              this.style.height = "40px";
              this.tag = true;
          }
      }
  }

• 选项卡效果

  var colors = ["teal","skyblue","deeppink","rgba(233,245,250,0.8)","orange"];
  //           [button   button   button     button                  button]
  document.body.style.background = "#ccc";
  ​
  //1.获取元素
  var oBtns = document.getElementsByTagName("button");
  ​
  //3.循环的事件中，需要下标又获取不到下标的时候，需要使用自定义属性去存储下标
  // oBtns[0].index = 0;
  // oBtns[1].index = 1;
  // oBtns[2].index = 2;
  ​
  //2.循环添加点击事件
  for(var i = 0;i<oBtns.length;i++){
      //循环的事件中，需要下标又获取不到下标的时候，需要使用自定义属性去存储下标
      oBtns[i].index = i;
      oBtns[i].onclick = function(){
          console.log(this.index);
          document.body.style.background = colors[this.index];     
      }
  }