提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

js中事件的处理与浏览器对象示例介绍

JS事件浏览器对象 处理 介绍 示例
2023-06-13 09:15:13 时间
复制代码代码如下:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>简单的事件处理</title>

<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="thisismypage">
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">

<!--
<scriptlanguage="text/javascript"src="hello.html">这个js的外部调用标签不能自结束</script>
<linkrel="stylesheet"type="text/css"href="./styles.css">
-->
<scripttype="text/javascript">
functionclickD(obj){
alert(obj.innerHTML);
}

functionmouseD(obj){
obj.style.color="#f00";
//当使用代码来设置样式时，如果css中通过-来表示的，都必须要用驼峰标示font-size->fontSize
obj.style.fontSize="16px";
}
functionoutD(obj){
obj.style.color="#000";
obj.style.fontSize="18px";
}

//with的用法
with(document){
write("dddd<br/>");
}
document.write("aaaa<br/>");
document.write("bbbb<br/>");
document.write("cccc<br/>");
</script>
</head>

<body>
<divonclick="clickD(this)"style="cursor:pointer;">点击了试一下</div>
<divonmouseover="mouseD(this)"onmouseout="outD(this)">鼠标移动来试试</div>

</body>
</html>

2，浏览器对象的例子：《涉及的是两个浏览器页面之间的传值》
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


<htmlxmlns="http://www.w3.org/1999/xhtml"lang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>js01_hello</title>
<metaname="author"content="Administrator"/>
<scripttype="text/javascript">
//setTimeout("endWelcome()",5000);
//functionendWelcome(){
//document.getElementById("welcome").style.display="none";
//}
</script>
</head>
<body>
<divid="welcome">欢迎进行我们的网站</div>
<ahref="#"onclick="window.open("test02.html","aaa","width=300,height=300,resizable=0")">test02</a>
<ahref="#"onclick="window.open("test03.html","aaa","width=400,height=400,resizable=0")">test03</a>
<br/>
<ahref="#"onclick="window.open("bless.html","aaa","width=600,height=300")">输入你祝福语</a>
<ahref="#"onclick="window.open("bless.html","aaa","width=600,height=300")">选择性别</a>
<divid="bless"></div>
</body>
</html>

复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"lang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>js01_hello</title>
<metaname="author"content="Administrator"/>
<scripttype="text/javascript">
functionbless(){
//获取输入的祝福语
varmb=document.getElementById("mb").value;
//获取父类窗口
varp=window.opener;
//获取父类窗口中的id为bless的div
varpd=p.document.getElementById("bless");
//设置pd的值
pd.innerHTML=mb;
//关闭当前窗口
window.close();
}
</script>
</head>
<body>
输入祝福语:<inputtype="text"size="40"id="mb"/><inputtype="button"onclick="bless()"value="输入"/>
</body>
</html>

相关文章