js发现的细节问题一-优快云博客

本文链接：https://blog.youkuaiyun.com/jiangtao7913/article/details/50497553

本文深入探讨了JavaScript中innerHTML属性的使用、window.onload方法的作用、以及三种消息框（警告框、确认框、提示框）的实现。通过实例代码，详细解释了如何在网页中动态修改内容、页面加载时执行特定操作，并展示了JavaScript中不同消息框的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.js元素的innerHTML属性后面添加的内容是替换原标签的内容，而不是在原标签的内容后面添加。

运行下面的例子：

<body>
<h1>abcdanklac</h1>
<hr/>
<h1>svdvsfv</h1>
<hr />
<div id="readout">aaaa</div>
</body>
</html>

运行结果如下：

如上图所示<div>标签里面的内容是aaaa,但是把<script>里面的下面代码去掉注释，则显示如下图结构

//var showBrowerType=function(){
// document.getElementById("readout").innerHTML="Your Brower say is :"+"<span class='highlight'>"
// +window.navigator.userAgent+"</span>.<hr/>";
//}

由此可见原<div>标签里面的内容被替换掉了，不信你试试。

2.js中的window.onload方法表示页面加载时调用方法：例如

var a=function(){

}

window.onload=a;

表示页面加载时调用a函数。

3.javascript中有三种消息框：警告框，确认框，提示框。

实例如下：

警告框：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var al=function(){
alert("你好");
alert("你好"+"\n"+"我也好！")
}
</script>
</head>

确认框：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var cof=function(){
var r=confirm("please press a button");
if(r==true){
  alert("以按下确认消息");
}else{
  alert("以按下取消消息");
  }
}
</script>
</head>

提示框：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var show=function(){
var name=prompt("请输入你的名字","jt");
alert(name);
if(name!=null && name!="")
{
document.write("你好！"+name+"今天过得怎么样？");
}
}
</script>
</head>