JS-DOM事件

JS DOM设置元素属性

设置id为box的这个元素的文字颜色,属性是减号连接的复合形式时

必需要转换为驼峰形式

       var box=document.getElementById("box");
       box.style.color='#f00';
       box.style.fontWeight="bold";
       var lis=document.getElementById("list").getElementsByTagName("li");
       // 遍历每一个li
       for(var i=0,len=lis.length;i){
          lis[i].style.color='#00f';
          if(i==0){
             lis[i].style.backgroundColor="#ccc";
          }else if(i==1){
             lis[i].style.backgroundColor="#666";
          }else if(i==2){
             lis[i].style.backgroundColor="#999";
          }else{
               lis[i].style.backgroundColor="#333";
          }
       }

innerHTML获取和设置标签之间的文本和html内容

className重新设置类，会替换掉原来的类

如果元素有多个class属性值，那么会全部获取到

       var lis=document.getElementById("list").getElementsByTagName("li");
       for(var i=0,len=lis.length;i){
           console.log(lis[i].innerHTML);
           lis[i].innerHTML+='程序';
           lis[1].className="current";
       }
       console.log(document.getElementById("box").className);

属性设置与获取

        var p=document.getElementById("text");
        var user=document.getElementById("user");  // null
        console.log(p.getAttribute("class"));  //p.className
        console.log(user.getAttribute("validate"));
        // 给p设置一个data-color的属性
        p.setAttribute("data-color","red");
        // 给input设置一个isRead的属性
        user.setAttribute("isRead","false");
        // 删除p上的align属性
        p.removeAttribute("align");

JS事件：

 

鼠标事件

onload 页面加载

onclick 鼠标点击

onmouseover 鼠标划入

onmouseout 鼠标离开

onmousemove 鼠标在目标内移动

onfocus 获得焦点

onblur 失去焦点

onchange 内容改变时

 

---

 

在事件触发函数中，this是指对该DOM元素的引用

    
    
    
开始
    
结束
    

window.onload会在网页中的所有元素（文本、图像、CSS样式等）加载完后才触发执行

    
    
    


    
这是一个DIV

change事件,一般作用域select或checkbox或radio

menu.selectedIndex 获取select中被选中的元素的下标

    
    
    


    

        请选择您喜欢的背景色：
        
            请选择
            红色
            绿色
            蓝色
            黄色
            灰色
        
    

鼠标事件：

onsubmit 表单提交

onmousedown 鼠标按下

onmousemove 鼠标移动

onmouseup 鼠标松开

onresize 浏览器窗口大小调整

onscroll 拖动滚动条

    
    
    


    

        
拖动
        
拖动
        
拖动
        
拖动
        
拖动
        
拖动
        
拖动
        
拖动
        
拖动
        
拖动
    
    

键盘事件：

onkeydown 按下键盘

onkeypress按下键盘（只有字母和数字符号）

onkeyup 松开键盘

keyCode 返回键码或者字符代码

 

    
    
    


    

        

            您还可以输入
            30/30