JavaScript利用函数设置和修改div盒子的innerHtml和innerText属性-----JavaScript

Myth丶恋晨 2024-02-19 09:27 29阅读 0赞

>     <!DOCTYPE html>
>     
>     <html lang="en" id="myHtml">
>     	<head>
>     		
>     		<meta charset="UTF-8">
>     		<meta name="viewport" content="width=device-width, initial-scale=1.0">
>     		<title>HtmlAll</title>
>     		<style type="text/css">
>     			#div1{
>     				background-color: aquamarine;
>     				width: 300px;
>     				height: 300px;
>     				border: 1px solid black;
>     				position: relative;
>     				top: 100px;
>     				left: 100px;
>     			}
>     		</style>
>     	</head>
>     	<body>
>     		<script type="text/javascript" src="j.js"></script>
>     		<table align="center">
>     			<form id="myForm">
>     				<tr><td>登录窗口</td></tr>
>     				<tr>
>     					<td>
>     						<input type="text" id="username"/>
>     					</td>
>     				</tr>
>     				<tr>
>     					<td>
>     						<input type="password" id="password"/>
>     					</td>
>     				</tr>
>     				<tr>
>     					<td>
>     						<input type="submit" value="登录"/>
>     					</td>
>     				</tr>
>     			</form>
>     		</table>
>     		
>     		
>     		
>     		<a href="javascript:void(0)" onclick="alert('test')">执行页面不跳转</a>
>     		<input type="button" onclick="vars()" value="123" />
>     		<input type="button" id="auto" value="auto" />
>     		<input type="button" id="tyo" value="tyo" />
>     		<input type="button" value="设置div的内容" id="btnm"/>
>     		<div id="div1"></div>
>     	</body>
>     </html>
> 
> <!DOCTYPE html>  
>   
> <html lang="en" id="myHtml">  
> <head>  
>   
> <meta charset="UTF-8">  
> <meta name="viewport" content="width=device-width, initial-scale=1.0">  
> <title>HtmlAll</title>  
> <style type="text/css">  
> \#div1\{  
> background-color: aquamarine;  
> width: 300px;  
> height: 300px;  
> border: 1px solid black;  
> position: relative;  
> top: 100px;  
> left: 100px;  
> \}  
> </style>  
> </head>  
> <body>  
> <script type="text/javascript" src="j.js"></script>  
> <table align="center">  
> <form id="myForm">  
> <tr><td>登录窗口</td></tr>  
> <tr>  
> <td>  
> <input type="text" id="username"/>  
> </td>  
> </tr>  
> <tr>  
> <td>  
> <input type="password" id="password"/>  
> </td>  
> </tr>  
> <tr>  
> <td>  
> <input type="submit" value="登录"/>  
> </td>  
> </tr>  
> </form>  
> </table>  
>   
>   
>   
> <a href="javascript:void(0)" οnclick="alert('test')">执行页面不跳转</a>  
> <input type="button" οnclick="vars()" value="123" />  
> <input type="button" id="auto" value="auto" />  
> <input type="button" id="tyo" value="tyo" />  
> <input type="button" value="设置div的内容" id="btnm"/>  
> <div id="div1"></div>  
> </body>  
> </html>

>     window.onload = function()
>     {
>     	document.getElementById("btnm").onclick = function()
>     	{
>     		//设置div的内容
>     		var divElt = document.getElementById("div1");
>     		//innerHtml和innerText不是代码,是属性,和我们设置text的value原理相同
>     		//innerHtml会把后面的字符串视为html代码,innerText视为字符串
>     		divElt.innerHTML = "<font color='red'>哈哈哈哈哈哈哈哈哈</font>";
>     		divElt.innerText = "<font color='red'>哈哈哈哈哈哈哈哈哈</font>";
>     	}
>     	document.getElementById("password").onkeydown = function(event,b)//局部变量
>     	{
>     		//获取键值
>     		//回车键键值是13,ESC是27
>     		//对于键盘事件来说,他都有keyCode属性用来获取键值
>     		if(event.keyCode === 13)
>     		{
>     			//识别到回车键位提示正在登录
>     			alert("正在登录")
>     		}
>     	}
>     	
>     	document.getElementById("myForm").onsubmit = function()
>     	{
>     		alert("正在登录")
>     	}
>     	
>     	document.getElementById("auto").onclick = function()
>     	{
>     		var ui = [false,true,1,2,"abc",3.14];
>     		for(var i = 0; i < ui.length; i++)
>     		{
>     			alert(ui[i]);
>     		}
>     		for(var i in ui)
>     		{
>     			//这个var i不是数组的元素,而是数组的下标
>     			alert(i);//显示都是下标的index
>     			alert(ui[i]);
>     		}
>     	}
>     	document.getElementById("tyo").onclick = function()
>     	{
>     		User = function(username,password)
>     		{
>     			this.username = username;
>     			this.password = password;
>     		}
>     		var u = new User("张三","12345");
>     		alert(u["username"] + "," + u["password"]);
>     		//这个用在数组上是角标index,用在对象上,是对象的属性名,返回字符串
>     		for(var value in u)
>     		{
>     			//属性名是一个字符串
>     			alert(value);
>     			//本身就是一个字符串,直接放进去即可
>     			alert(u[value]);
>     		}
>     		with(u)
>     		{
>     			//这种方式仅作了解,不要用尽量,不能所见即所得
>     			alert(username + "," + password);
>     		}
>     	}
>     }
>     
>     function vars()
>     {
>     	alert("1");
>     }
> 
> window.onload = function()  
> \{  
> document.getElementById("btnm").onclick = function()  
> \{  
> //设置div的内容  
> var divElt = document.getElementById("div1");  
> //innerHtml和innerText不是代码,是属性,和我们设置text的value原理相同  
> //innerHtml会把后面的字符串视为html代码,innerText视为字符串  
> divElt.innerHTML = "<font color='red'>哈哈哈哈哈哈哈哈哈</font>";  
> divElt.innerText = "<font color='red'>哈哈哈哈哈哈哈哈哈</font>";  
> \}  
> document.getElementById("password").onkeydown = function(event,b)//局部变量  
> \{  
> //获取键值  
> //回车键键值是13,ESC是27  
> //对于键盘事件来说,他都有keyCode属性用来获取键值  
> if(event.keyCode === 13)  
> \{  
> //识别到回车键位提示正在登录  
> alert("正在登录")  
> \}  
> \}  
>   
> document.getElementById("myForm").onsubmit = function()  
> \{  
> alert("正在登录")  
> \}  
>   
> document.getElementById("auto").onclick = function()  
> \{  
> var ui = \[false,true,1,2,"abc",3.14\];  
> for(var i = 0; i < ui.length; i++)  
> \{  
> alert(ui\[i\]);  
> \}  
> for(var i in ui)  
> \{  
> //这个var i不是数组的元素,而是数组的下标  
> alert(i);//显示都是下标的index  
> alert(ui\[i\]);  
> \}  
> \}  
> document.getElementById("tyo").onclick = function()  
> \{  
> User = function(username,password)  
> \{  
> this.username = username;  
> this.password = password;  
> \}  
> var u = new User("张三","12345");  
> alert(u\["username"\] + "," + u\["password"\]);  
> //这个用在数组上是角标index,用在对象上,是对象的属性名,返回字符串  
> for(var value in u)  
> \{  
> //属性名是一个字符串  
> alert(value);  
> //本身就是一个字符串,直接放进去即可  
> alert(u\[value\]);  
> \}  
> with(u)  
> \{  
> //这种方式仅作了解,不要用尽量,不能所见即所得  
> alert(username + "," + password);  
> \}  
> \}  
> \}
> 
> function vars()  
> \{  
> alert("1");  
> \}