zoukankan      html  css  js  c++  java
  • Dom的增删查改以及常用事件

    dom的增删查改
    // 查
    var _input = document.getElementById('_input');
    var _div = document.getElementsByClassName('_div');
    var _div2 = document.getElementsByTagName('div');
    var _radio = document.getElementById('_radio');
    // 改
    input.value = '随便';
    div.style.height = '100px';
    div.style.width = '100px';
    div.style.backgroundColor = 'pink';
    div.innerText = '随便';
    div.innerHtml = '<strong>随便</strong>';
    radio.checked = true;

    // 增
    var p = document.createElement('p');
    p.id = 'p1';
    _div[0].appendChild(p);

    // 删
    _div[0].removeChild(p);

    dom的事件
    var div1 = document.getElementById('div1');
    var input1 = document.getElementById('input1');
    // 鼠标点击时触发的事件
    div1.onclick = function(){
    console.log('onclick');
    };
    // 鼠标在元素上触发的事件
    div1.onmouseover = function(){
    div1.style.backgroundColor = 'green';
    };
    // 鼠标移出元素时触发的事件
    div1.onmouseout = function(){
    div1.style.backgroundColor = 'blue';
    }
    // 获得焦点
    input1.onfocus = function(){
    console.log('onfocus');
    };
    // 失去焦点
    input1.onblur = function(){
    console.log('onblur');
    }
    //值被更改
    input1.onchange = function(){
    console.log('onchange');
    }

  • 相关阅读:
    vue 自定义指令
    vue 插槽
    vue 菜单跳转 页面错乱
    vue项目中使用elementUI的el-tabs组件 浏览器卡死问题 解决办法
    vue 环境配置
    移动端页面 问题 注意事项
    定义全局 强制刷新指令
    手机端样式 处理
    手机访问电脑本地开发的页面
    百度AI
  • 原文地址:https://www.cnblogs.com/lhl66/p/7192609.html
Copyright © 2011-2022 走看看