JavaScript 获取元素及事件 |
您所在的位置：网站首页 › 点击事件获取当前元素 › JavaScript 获取元素及事件 |
|
使用ID获取元素对象
document.getElementById( “ID” );：返回文档中一个指定ID的元素对象，用于精确获取；若找到则返回该元素对象，否则返回null 获取或设置元素内容元素对象.innerText = “文本”：返回或设置标签内的文本值，不包含HTML标签 id选择器 var zxw = document.getElementById("zxw"); alert(zxw);//获取 zxw.innerText = "设置新内容";元素对象.innerHTML= “文本”：返回或设置标签内的HTML内容，包含HTML标签 id选择器 var zxw = document.getElementById("zxw"); alert(zxw);//获取 zxw.innerText = "设置新内容"; 获取或设置元素属性元素对象.属性名 = “属性值”;：获取或设置元素属性 var zxw = document.getElementById("zxw"); // 获取元素属性 alert(zxw.id); alert(zxw.type); alert(zxw.value); // 设置元素属性 zxw.type = "button"; zxw.value = "按钮"; // 添加元素属性 zxw.title = "我是添加的属性"; 通用方法获取或设置元素属性 元素对象.getAttribute(“属性名”)：获取元素指定的属性元素对象.setAttribute(“属性名”, “属性值”)：设置元素指定属性的值元素对象.removeAttribute()：移除元素指定的属性 var z = document.getElementById("zxw"); // 获取任意属性 alert(z.getAttribute("abc")); alert(z.getAttribute("class")); alert(z.getAttribute("value")); // 设置元素属性 z.setAttribute("type", "button"); z.setAttribute("value", "按钮"); // 添加元素属性 z.setAttribute("title", "新添加的属性"); // 移除元素属性 z.onclick = function(){ z.removeAttribute("value"); } 获取或设置元素行内样式元素对象.style.属性名 = “属性值”：获取或设置元素行内样式 获取和设置元素行内样式 var z = document.getElementById("z"); //方式一：获取元素行内样式 // alert(z.style.cssText); // 方式一：设置元素行内样式,会对行内样式重置 // z.style.cssText = "color:blue; font-size:50px;" // 方式二：获取元素行内某个样式 alert(z.style.color); // 方式二：设置元素行内某个样式 // 当行内样式中的属性名有"-"的，应使用驼峰命名法 z.style.color = "blue"; z.style.fontSize = "50px"; 添加或删除元素类名元素对象.classList.add(“类名1”, “类名2”);：添加元素类名 元素对象.classList.remove(“类名1”, “类名2”);：删除元素类名 标题 .cz1{color: black; font-size: 16px;} .cz2{color: red; font-size: 24px;} .cz3{width: 200px; height: 100px; border: 2px solid black;} 添加和删除元素类名 var z = document.getElementById("z"); // 添加元素类名 z.classList.add("cz2", "cz3"); // 删除元素类名 z.classList.remove("cz2", "cz3"); 元素类名的切换元素对象.toggle(“类名”)：元素类名的切换 标题 .cz1{color: black; font-size: 16px;} .cz2{color: red; font-size: 24px;} 添加和删除元素类名 var z = document.getElementById("z"); // toggle在有相同类名时执行删除，没有相同类名时执行添加 z.classList.toggle("cz2"); // 强制执行添加或删除 // 参数为true时，执行添加 // 参数为false时，执行删除 z.classList.toggle("cz2", true); 使用类名获取元素对象document.getElementsByClassName(“类名”);：返回文档中所有指定类名的一组元素，而不是一个元素；可以把它当做数组进行处理 使用类名获取元素1 使用类名获取元素2 使用类名获取元素3 使用类名获取元素4 使用类名获取元素5 // 返回文档中所有指定类名的一组元素，而不是一个元素 // 可以把它当做数组进行处理 var z = document.getElementsByClassName("cz1"); // console.log(z); // 给某个元素设置样式 z[0].style.color = "red"; z[2].style.color = "green"; 使用标签或name属性获取元素对象document.getElementsByTagName(“标签名”);：返回文档中所有指定标签的一组元素，而不是一个元素；可以把它当做数组进行处理 使用标签获取元素1 使用标签获取元素2 使用标签获取元素3 使用标签获取元素4 使用标签获取元素5 var z = document.getElementsByTagName("p"); z[0].style.color = "red"; z[1].style.color = "blue"; document.getElementsByName("标签名");：返回文档中所有指定Name的一组元素，而不是一个元素；可以把它当做数组进行处理 使用name获取元素1 使用name获取元素2 使用name获取元素3 使用name获取元素4 使用name获取元素5 var z = document.getElementsByName("cz") z[0].style.color = "blue"; z[1].style.color = "red"; z[2].style.color = "orange"; 使用CSS选择器获取元素对象document.querySelectorAll(“css选择器”);：返回文档中匹配指定css选择器的所有元素 document.querySelector(“css选择器”);：返回文档中匹配指定css选择器的第一个元素 使用css选择器获取元素0 使用css选择器获取元素2 使用css选择器获取元素3 使用css选择器获取元素4 使用css选择器获取元素5 var z = document.querySelectorAll("#z1 p"); for (var i = 0; i 标题 #zzz{ width: 500px; height: 300px; background: red; margin: 0 auto; color: white; font-size: 30px; } function abc(){ document.getElementById("zzz").innerHTML = Math.random(); }方式二： 动态绑定 语法：对象.事件 = 匿名函数（匿名函数中是要执行的函数） 标题 #zzz{ width: 500px; height: 300px; background: red; margin: 0 auto; color: white; font-size: 30px; } window.onload = function(){ var zzz = document.getElementById("zzz"); zzz.onclick = function(){ zzz.innerHTML = Math.random(); } }方式三： 事件监听 语法：对象.addEventListenter(事件名（字符串）， 执行函数，布尔值（可选）);：添加事件 语法：对象.removeEventListenter(事件名（字符串）， 执行函数，布尔值（可选）);：移除事件 标题 #zzz{ width: 500px; height: 300px; background: red; margin: 0 auto; color: white; font-size: 30px; } function sjs(){ document.getElementById("zzz").innerHTML = Math.random(); } function sc(){ document.getElementById("zzz").removeEventListener("mousemove", sjs); } window.onload = function(){ document.getElementById("zzz").addEventListener("mousemove",sjs); document.getElementById("zzz").addEventListener("click",sc); } 事件处理函数 鼠标事件 onclick：鼠标点击对象事件（当return事件函数，事件函数返回的是true时，将继续操作；当返回是false时，将中断操作）ondblclick：鼠标双击对象事件onmousedown：鼠标按下对象事件onmouseup：鼠标松开对象事件onmousemove：鼠标移动对象事件mouseover：鼠标移入对象事件mouseout：鼠标移出对象事件contextmenu：鼠标右键单击事件 var div1 = document.getElementById("div1"); var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); function myFun1(){ div1.innerHTML = "鼠标双击事件"; div1.style.border = "5px solid blue"; } function myFun2(){ div1.innerHTML = "鼠标按下事件"; div1.style.border = "5px solid blue"; } function myFun3(){ div1.innerHTML = "鼠标松开事件"; div1.style.background = "orange"; div1.style.border = "5px solid green"; } function myFun4(){ div1.innerHTML = "鼠标移入事件"; div1.style.border = "5px solid blue"; } function myFun5(){ div1.innerHTML = "鼠标移出事件"; div1.style.border = "5px solid green"; } function myFun67(){ div1.innerHTML = "在div中点击了右键"; div1.style.background = "blue"; } //鼠标按下事件 div1.onmousedown = myFun2; //鼠标松开事件 div1.onmouseup = myFun3; //鼠标移入事件 div1.addEventListener("mouseover", myFun4); //鼠标移出事件 div1.addEventListener("mouseout", myFun5); //鼠标在div中右键 // div1.addEventListener("contextmenu", myFun6); div1.addEventListener("contextmenu", function(){ div1.innerHTML = "在div中点击了右键"; div1.style.background = "blue"; }); 键盘事件 onkeydown：某个键盘按键按下onkeyup：某个键盘按键松开onkeypress：某个键盘按键被按下并松开onkeydown与onkeypress的区别 1、一个放开一个没有放开，onkeydown先于onkeypress发送 2、我们每敲击一下键盘这三个事件会依次发生：onkeydown–onkeypress–onkeyup 3、onkeypress事件不适用于系统按键（如：Alt、Ctrl、Shift、ESC） 4、onkeydown：是在用户按下任何键盘键时发生。监听一个用户是否按下按键请用onkeydown事件，所有浏览器都支持onkeydown 5、键盘事件的event对象中包含一个keyCode和charCode属性，onkeydown和onkeyup表示你按下的具体的键，通过keyCode返回ASCII码；而onkeypress表示你按下的字符，识别大小写字母，通过charCode返回Unicode码 剪贴板事件 onpaste：事件在用户向元素中粘贴文本时触发oncopy：事件在用户拷贝元素上的内容时触发oncut：事件在用户剪切元素内容时触发 禁止复制和粘贴 var noCopy = document.forms["myForm"].copy; noCopy.oncopy = function(){ alert("该内容禁止复制！"); return false;//false为阻止复制 } noCopy.onpaste = function(){ alert("禁止粘贴内容！"); return false; } 其他事件 onload：一个页面或一幅图像完成加载后，执行某事件onunload：用户退出页面后，执行某事件onabort：图像的加载被中断，执行某事件onblur：元素失去焦点，执行某事件onfocus：元素获得焦点，执行某事件onchange：域的内容被改变，执行某事件onerror：在加载文档或图像时发生错误，执行某事件onselect：文本被选中，执行某事件onreset：重置按钮被点击后，执行某事件onscroll：当文档被滚动时，执行某事件 事件的对象在触发某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息 type：获取事件类型 target：获取事件目标来源（某标签） clientX：返回当事件触发时，鼠标指针在浏览器内的水平坐标 clientY：返回当事件触发时，鼠标指针在浏览器内的垂直坐标 screenX：返回当事件触发时，鼠标指针在屏幕内的水平坐标 screenY：返回当事件触发时，鼠标指针在屏幕内的垂直坐标 offsetX：返回当事件触发时，鼠标指针在元素内的X坐标 offsetY：返回当事件触发时，鼠标指针在元素内的Y坐标 keyCode：事件属性，返回按下键盘字符的Unicode编码，在火狐浏览器的onkeypress事件中无效 which：返回onkeypress事件触发的键的值的字符代码，或者onkeydown或onkeyup事件的键的代码；注：在不兼容情况下可使用var x = event.which || event.keyCode; ctrlKey：返回当事件触发时，“Ctrl”是否被按下 altKey：返回当事件触发时，“Alt”是否被按下 shiftKey：返回当事件触发时，“Shift”是否被按下 button：返回当事件触发时，哪个鼠标按钮被点击 1、button：事件属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击 2、event.button = 0 | 1 | 3、0、1、2 分别代表左中右三个键，但是在IE里左中右三个键对应的数字为1 4 2 scrollLeft：设置或返回区位于对象左边界和窗口中目前可见内容的最左端之间的距离（就是滚动条离左边界的距离） scrollTop：设置或返回滚动条离最顶端之间的距离 scrollHeight：获取对象的滚动高度 scrollwidth：获取对象的滚动宽度 1、document.documentElement.scrollTop || document.body.scrollTop垂直方向滚动的值 事件的冒泡和捕获事件的冒泡：事件按照从最特定的事件目标到最不特定的事件目标的顺序触发 1、事件冒泡可以形象地比喻为一颗石头投入水中，泡泡会一直从水底冒出水面，也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象 事件的捕获：与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素 1、事件捕获时，父级元素先触发，子级元素后触发 可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡 不是所有事件都能冒泡，例如：blur、focus、load、unload stopPropagation()：阻止事件冒泡 preventDefault()：阻止事件的默认行为 this的应用在事件中this指向当前正在操作的元素 标题 .zzz{ width: 200px; height: 200px; float: left; background: red; margin-left: 10px; } window.onload = function(){ var zzz = document.getElementsByClassName("zzz"); for (var i = 0; i 标题 .zzz{ width: 200px; height: 200px; float: left; background: red; margin-left: 10px; } function abc(a){ a.style.background = "green"; a.style.height = "300px"; } window.onload = function(){ var zzz = document.getElementsByClassName("zzz"); for (var i = 0; i事件监听会自动转入正在操作的元素对象 标题 .zzz{ width: 200px; height: 200px; float: left; background: red; margin-left: 10px; } function abc(){ this.style.background = "green"; this.style.height = "300px"; } window.onload = function(){ var zzz = document.getElementsByClassName("zzz"); // 事件监听会自动传入正在操作的元素对象 for (var i = 0; i 标题 .zzz{ width: 200px; height: 200px; float: left; background: red; margin-left: 10px; } function abc(a){ a.style.background = "green"; a.style.height = "300px"; } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |