web api.2_web api2.2-CSDN博客

本文链接：https://blog.csdn.net/Mei12656276/article/details/86091879

封装一个函数

function my$(id){

    return  document.getElementById(id);

}

图片转换

<a href="1.jpg" id="a"> 
<img	 src="2.jpg  id="b">
</a>	
   var x = document.getElementById(b);
   x.onclick=function(){
   var x = document.getElementById(a);
   this.src=x.href;
   return false//防止跳转
   }

默认点击

   <input typ`在这里插入代码片`e="button"  value="点菜" id="btn">
<select name="" id="ss">
    <option value="">红烧肉</option>
    <option value="">炸鸡腿</option>
    <option value=""  id="x" >毒鸡汤</option>
    <option value="">心灵鸡汤</option>
    <option value="">乌鸡汤</option>
</select>
<script>


  my$("btn").onclick = function () {
    my$("x").selected = true;
}
      // checked  selected  readonly disabled
</script>
       

var btn=document.getElementById("btn");
btn.onclick=function(){
var x=document.getElementById("x");
x.selected=true;
}

改变盒子大小

<input type="button" value="asb"  id="btn">
<div id="dv"> 123 </div>
<script src="common.js"></script>
<script>
    my$("btn").onclick =function(){
        my$("dv").style.width ="200px";
        my$("dv").style.height ="200px";
        my$("dv").style.backgroundColor ="pink";
        my$("dv").style.fontSize="30px"
    }

开关灯

  <style>
        #dv {
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
   .no{
       display: none;
   }
    </style>
</head>
<body>
<input type="button"  value="隐藏" id="btn">
<div id="dv" >  </div>
<script src="common.js"></script>
<script>

my$("btn").onclick=function () {
    if(this.value=="隐藏"){
        my$("dv").className="no";
        this.value="显示"
    }else if ( this.value=="显示"){
    //clssName添加类名会覆盖没有的
        my$("dv").className="";
        this.value="隐藏"
    }


}
"隔行变色"
<input type="button"  value="隔行变色" id="btn">
<ul id="uu">
    <li id="j">五菱</li>
    <li id="o">马丁</li>
    <li>法拉利</li>
    <li>兰博</li>
    <li>ae86</li>
    <li>玛莎</li>
    <li>路虎</li>
    <li>宝马</li>
    <li>护卫舰</li>
    <li>奔奔</li>
    <li>红旗</li>

</ul>
<script src="common.js"></script>
<script>
    var x=my$("uu").getElementsByTagName("li");

       my$("btn").onclick = function () {
           for(var i=0 ;i<x.length;i++) {
            if (i % 2 == 0) {
               x[i].style.color="red";
            } else {
                x[i].style.color="blue";
            }
        }
    }
    鼠标事件
  

      <ul>
        <li>1li</li>
        <li>2li</li>
        <li>3li</li>
        <li>4li</li>
        <li>5li</li>
        <li>6li</li>
    </ul>
<script src="common.js"></script>
<script>
    //onmouseover移入  onmouseout离开
   var list= document.getElementsByTagName("li");
    for (var i=0;i<list.length;i++){
        //给每个li注册一个鼠标事件
        list[i].onmouseover=function(){
            this.style.backgroundColor="pink";
        }
        list[i].onmouseout=function(){
            this.style.backgroundColor="";
        }
    }

焦点 onfocus onblur

    my$("txt").onfocus=function () {
        console.log(this.value);
           this.value=" ";
           this.style.outline ="none";
           

    }
  my$("txt").onblur=function  (){
        this.value="123";


}
    my$("txt").onblur=function(){

        if(this.value.length>=6 &&this.value.length<=10){

            this.style.backgroundColor="red";
        }else {
            this.style.backgroundColor="green";
        }
        this.value="123";

    }

浏览器兼容

function getInnerText( element){
    //
    if(typeof element.textContent=="undefined"){
        return element.innerText;

    }else{
        return element.textContent;
    }
}
    my$("btn").onclick=function(){
        my$("dv").textContent="is chance"
        console.log(getInnerText(my$("dv")));
    }
  function setInnerText(element, text){

        if(typeof element.textContent=="undefined"){
           element.innerText = text;

        }else{
            element.textContent = text;
        }
    }

innerTxt获取内容 innerHTML解析标签获取内容

my$("btn").onclick=function(){
    my$("dv").innerText="a";
    my$("dv").innerHTML="<h1>a</h1>";
    console.log(my$("dv").innerHTML);
    console.log(my$("dv").innerText);

}

html 标签没有这个属性自定义属性
获取自定义属性的名字getAttribute();
甚至自定义的属性setAttribute(x,设置的值);
removeAttribute移除属性

 var x=document.getElementsByTagName("li");
    for(var i=0;i<x.length;i++){
     x[i].setAttribute("score",parseInt(Math.random*7));
     x[i].onclick=function   (){
     alert(this.getAttribute("score"));
     this.removeAttribute("score");
 }
    }