首页 > 代码库 > JavaScript基础--事件驱动和访问CSS技术(十)
JavaScript基础--事件驱动和访问CSS技术(十)
1、原理:
2、快速入门案例
js中的事件主要分为4种:
案例:监听鼠标点击事件,并能够显示鼠标点击的位置x,y
<script language="javascript" type="text/javascript"> function test1(e){ window.alert(‘x=‘+e.clientX+‘y=‘+e.clientY); } function test2(e){ window.alert(‘x=‘+e.clientX+‘y=‘+e.clientY); } function test3(){ window.alert(new Date()); } </script> <body onm ousedown="test1(event)" onm ousemove="test2(event)"> <input type="button" onclick="test3()" value="http://www.mamicode.com/显示当前时间"/> </body>
3、js如何访问元素的行内style属性,进行style外观修改
<script language="javascript" type="text/javascript"> function test4(obj){ //怎么知道button1被按,还是button2按下 //window.alert(obj.value); if(obj.valuehttp://www.mamicode.com/=="黑色"){ //获取div1 var div1 = document.getElementById(‘div1‘); div1.style.backgroundColor="black"; }else if(obj.valuehttp://www.mamicode.com/=="红色"){ var div1 =document.getElementById(‘div1‘); div1.style.backgroundColor="red"; } } </script> <body> <!--如何通过修改style来改变style--> <div id ="div1" style="width:400px;height:300px;background-color:red">div1</div> <input type="button" value="http://www.mamicode.com/黑色" onclick="test4(this)"/> <input type="button" value="http://www.mamicode.com/红色" onclick="test4(this)"/> </body>
4、js如何修改外部CSS样式
<html> <head> <link href="http://www.mamicode.com/mycss.css" rel="stylesheet" type="text/css"/> <script language="javascript" type="text/javascript"> function test4(obj){ //获取mycss.css 中的所有class选择器都获取, var ocssRules = document.styleSheets[0].rules; //从ocssRules中取出你希望的class //ocssRules[0];这里的0表示mycss.css文件中的第一个规则 var style1 = ocssRules[0]; if(obj.valuehttp://www.mamicode.com/=="黑色") style.style.backgroundColor="black"; else if(obj.valuehttp://www.mamicode.com/=="红色") style1.style.backgroundColor="red"; } </script> </head> <body> <!--如何通过修改style来改变style--> <div id ="div1" class="style">div1</div> <input type="button" value="http://www.mamicode.com/黑色" onclick="test4(this)"/> <input type="button" value="http://www.mamicode.com/红色" onclick="test4(this)"/> </body> </html>
/*mycss.css*/ .style{ width:600px; height:400px; background-color:black; }
5、如何区分当前浏览器是什么类型
//"",null,false,0,NaN 都是False if(window.XMLHttpRequest){ //Mozilla,Safari,IE7,IE8 if(!window.ActiveXObject){ //Mozilla,Safari, alert(‘Mozilla,Safari‘); }else{ alert(‘IE‘); } }else{ alert(‘IE6‘); }
6、其他事件
<html> <head> <script language="javascript" type="text/javascript"> function test4(e){ window.alert("ok1"); } function test5(e){ window.alert("ok2"); } function test6(){ window.alert("输入框被选中"); } function test7(){ window.alert("onload"); //把鼠标定位到text输入框 //document.getElementById("text1").onfocus; //onfocus这个属性不正确 } function test8(){ window.alert("onunload"); } function test9(){ window.alert("onbeforeunload"); } function test10(){ window.alert("不要点击右键"); return false; } function test11(){ window.alert("不能选择文字"); } </script> </head> <body onselectstart="return test11()" oncontextmenu="return test10()" onl oad="test7()" onbeforeunload="test9()" onunload="test8()"> <!--如何通过修改style来改变style--> <div id ="div1" class="style">div1</div> <input type="button" value="http://www.mamicode.com/黑色" onclick="test4(this),test5(this)"/> <input type="text" id="text1" onfocus="test6()"/> </body> </html> /* window有三个事件 onload 页面打开 onbeforeunload 页面关闭前 onunload 关闭页面 说明: 第一次页面打开的调用顺序:onload 第二次刷新页面的调研顺序:onbeforeunload->onunload->onload 在第二次打开页面前,要用到onbeforeunload->onunload事件销毁第一次打开页面中没有用的对象,再用到onload加载第二次打开页面的变量信息 */
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。