JS-DOM事件
2021-05-03 05:26
YPE html>
标签：down har 复合 ++ mouse width 字母 改变 list
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元素的引用
开始结束
DOM 0级
通过DOM获取元素
元素.事件=脚本
执行脚本可以是一个匿名函数，也可以直接调用函数，如果调用函数，语法是：ele.事件=函数名，不加括号
demo 锁定
window.onload会在网页中的所有元素（文本、图像、CSS样式等）加载完后才触发执行
Document 这是一个DIV
change事件,一般作用域select或checkbox或radio
menu.selectedIndex 获取select中被选中的元素的下标
Document 请选择您喜欢的背景色：
鼠标事件：
onsubmit 表单提交
onmousedown 鼠标按下
onmousemove 鼠标移动
onmouseup 鼠标松开
onresize 浏览器窗口大小调整
onscroll 拖动滚动条
Document 拖动
拖动
拖动
拖动
拖动
拖动
拖动
拖动
拖动
拖动
键盘事件：
onkeydown 按下键盘
onkeypress按下键盘（只有字母和数字符号）
onkeyup 松开键盘
keyCode 返回键码或者字符代码
Document 您还可以输入 30/30
JS-DOM事件
标签：down har 复合 ++ mouse width 字母 改变 list
原文地址：https://www.cnblogs.com/chenyingying0/p/12123878.html