标签：比较 window mouseover elements tag over aaa function 鼠标
1，事件：
（1）onmouseover:鼠标移入某个对象等触发事件
（2）onmouseout:鼠标移出某个对象等触发事件
2,获取元素
通过Id获取只能获取一个对象：document.getElementById(‘id名‘)
获取一组同一类型的对象（数组）：document.getElementsByTagName(‘div’）；获取所有的div，设置某个div的属性：document.getElementsByTagName(‘div’)[i]
3，函数
（1）function定义函数
function 函数名(){ }
引用：事件名（如onclick=“函数名()”）
（2）调用属性的方式：
1，xxx.xxxx.xxx，例如：document.getElementById(‘ ‘)
2,xxx[‘ ‘][‘ ‘]，例如：document[‘getElementById‘](‘ ‘) ，这种方式比较好，比1方式可以接受变量值。
（3）改变对象属性的方式：
1，修改对象的style，例如：id.style.xxx ,相当于在对象的行间加入style属性
2，设置class，修改为class，例如：id.ClassName=‘class‘
js可以修改任何对象的属性
4，变量
var定义变量
5，使用
（1）a链接内放JavaScript：
<a href="javascript: ;">XXX</a>
（2）使用class时：document.getElementById(‘ ‘).ClassName=‘‘;
（3）加载事件（当script写在boad外使用2,3方式时，必须使用window.onload =function( ){ 要写的JavaScript代码 }）：
1，在要设置的按钮等的input中加载，例如：<input type="button" value="提交" onclick="aaa()" />
<head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function changeColor() { var div1=document.getElementById(‘div1‘); div1.style.background=‘red‘; } function retColor() { var div1=document.getElementById(‘div1‘); div1.style.background=‘black‘; } </script> </head> <style type="text/css"> #div1{ width: 100px; height: 100px; background-color:black; } </style> <body> <div id="div1" onmouseover="changeColor()" onmouseout="retColor()"></div> </body>
2，在script中设置事件属性，例如：
<head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function() //加载页面完成后调用该函数 { var div1=document.getElementById(‘div1‘); div1.onmouseover=changeColor; div1.onmouseout=retColor; function changeColor() { var div1=document.getElementById(‘div1‘); div1.style.background=‘red‘; } function retColor() { var div1=document.getElementById(‘div1‘); div1.style.background=‘black‘; } } </script> </head> <style type="text/css"> #div1{ width: 100px; height: 100px; background-color:black; } </style> <body> <div id="div1"></div> </body>
3，直接在属性后写函数：
<head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function() { var div1=document.getElementById(‘div1‘); div1.onmouseover=function () { var div1=document.getElementById(‘div1‘); div1.style.background=‘red‘; } div1.onmouseout=function () { var div1=document.getElementById(‘div1‘); div1.style.background=‘black‘; } } </script> </head> <style type="text/css"> #div1{ width: 100px; height: 100px; background-color:black; } </style> <body> <div id="div1"></div> </body>
标签：比较 window mouseover elements tag over aaa function 鼠标
原文地址：https://www.cnblogs.com/lq13035130506/p/12169189.html
