javascript系列教程（二）
innerHTML和innerTextd的用法
JS常见事件
操作div的任意样式
下一篇开始JS的数据类型介绍
innerHTML和innerTextd的用法
这两个都是对元素的一个操作，简单讲，innerHTML可以在某种特定环境下重构某个元素节点的DOM结构，innerText只能修改文本值。 给获取到的元素⼀些内容，document.getElementById(‘id名’).innerHTML=‘内容’。
效果：本来div标签下面是没有文字的，获取标签后给到元素文字显示。
JS常见事件
Js事件就是我们的行为能被侦测到，且触发相应的函数（函数里面写上事件的行为）
1. onmouseover ⿏标被移到某元素之上
2. onmouseout ⿏标从某元素上⾯移开
3. onchange 元素值改变，⼀般⽤在表单元素上
4. onkeydown ⽤户按下键盘按键
5. onfocus 元素获得焦点
6. onblur 元素失去焦点
7. window.onload ⻚⾯加载完成
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常见JS事件</title> <style type="text/css"> #tim{ width:300px; height:300px; background:red; margin: 0 auto; } </style> </head> <body> <input type="" name="" id="xd"> <div id="tim"></div> <script type="text/javascript"> document.getElementById("tim").onclick=function{ //函数里面写我们要做的事情 alert("我是被点击了") } //鼠标移入事件 document.getElementById("tim").onmouseover=function(){ //当鼠标移入红框控制台输出下面数字。 console.log("鼠标移入") } //鼠标移出事件 document.getElementById("tim").onmouseout=function(){ //当鼠标移入红框控制台输出下面数字，鼠标移入移除会在控制台显示下面的文字。 console.log("鼠标移出") } //onchange 元素值改变，⼀般⽤在表单元素上 document.getElementById("xd").onchange=function(){ console.log(document.getElementById("xd").value) } //onkeydown ⽤户按下键盘按键 document.getElementById("xd").onmouseout=function(){ console.log("键盘按下了") } //onfocus 元素获得焦点事件，获取到焦点就是当你把鼠标放进输入框，之后点击一下，鼠标变成一条竖线之后输入的那种。 </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动手操作DIV样式</title> <style type="text/css"> #tim{ width:100px; height:100px; background:black; margin:0 auto; } </style> </head> <body> <button id="taller">增高</buttom> <button id="longer">增长</buttom> <button id="changebg">改变背景颜色</buttom> <div id="tim"></div> <script type="text/javascript"> //window.onload,在文档加载完之后执行，要养成好习惯写这个 window.onload=function(){ //给增高按钮增加事件 document.getElementById("taller").onclick=function(){ // 获取ID为tim的div,点一下增高按钮长度就会增加 document.getElementById("tim").style.height="300px" } document.getElementById("longer").onclick=function(){ // 获取ID为tim的div document.getElementById("tim").style.width="300px" } document.getElementById("changebg").onclick=function(){ // 获取ID为tim的div document.getElementById("tim").style.background="yellow" } } </script> </body> </html>
