13.2 绑定事件
- 静态绑定 ：直接把事件写在标签元素中 。
<div id="div" onclick="foo(this)">click</div> <script> function foo(self){ // 形参不能是this; console.log("foo函数"); console.log(self); } </script> - 动态绑定：在js中通过代码获取元素对象,然后给这个对象进行后续绑定 。
<p id="i1">试一试!</p> <script> var ele=document.getElementById("i1"); ele.onclick=function(){ console.log("ok"); console.log(this); // this直接用 }; </script>
- 文本操作
<div class="c1"><span>click</span></div> <script> var ele =document.querySelector(".c1"); ele.onclick = function (){ // 查看标签文本 console.log(this.innerHTML) console.log(this.innerText) } ele.ondblclick = function (){ // 设置标签文本 this.innerHTML = "<a href=https://www.huyubaike.com/biancheng/'#'>yuan" //this.innerText = "yuan" } - value操作
<input type="text" id="i1" value=https://www.huyubaike.com/biancheng/"yuan"> - css样式操作
<p id="i1">Hello world!</p> <script> var ele = document.getElementById("i1"); ele.onclick = function (){ this.style.color = "red" } </script> - 属性操作
elementNode.setAttribute("属性名","属性值") elementNode.getAttribute("属性名") elementNode.removeAttribute("属性名"); - class属性操作
elementNode.className elementNode.classList.add elementNode.classList.remove经验总结扩展阅读
- 唐朝李镇宗是怎么死的 李镇宗简介
- JavaScript for循环的终止问题
- JavaScript常用工具函数
- Django的简单使用
- 1.docker的基本使用
- 1.python基础使用
- 除夕别称是什么 除夕的风俗有哪些 简介
- 口红哪种牌子比较好用？荷兰口红品牌排行榜简介
- 王者男陪玩简介 王者荣耀陪玩简介怎么写吸引人
- 王者陪玩简介幽默 王者荣耀女陪玩介绍怎么说
