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

前端技术 2023/08/10 JavaScript
复制代码 代码如下:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">
<html>
<head>
<title>简单的事件处理</title>

<meta http-equiv=\"keywords\" content=\"keyword1,keyword2,keyword3\">
<meta http-equiv=\"description\" content=\"this is my page\">
<meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">

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

function mouseD(obj){
obj.style.color = \"#f00\";
//当使用代码来设置样式时，如果css中通过-来表示的，都必须要用驼峰标示font-size -> fontSize
obj.style.fontSize = \"16px\";
}
function outD(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>
<div onclick=\"clickD(this)\" style=\"cursor:pointer;\">点击了试一下</div>
<div onmouseover=\"mouseD(this)\" onmouseout=\"outD(this)\">鼠标移动来试试</div>

</body>
</html>

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

<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01//EN\"
\"http://www.w3.org/TR/html4/strict.dtd\">


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

复制代码 代码如下:

<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01//EN\"
\"http://www.w3.org/TR/html4/strict.dtd\">

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

本文地址：https://www.stayed.cn/item/843

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案