📄 12.15.htm

📁 精通JavaScript动态网页编程（书）

💻 HTM

字号:

<!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>
<title>inner/outer Tester</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" >
</head>
<!--设置id为content的文本区的值-->
<body onload="document.testForm.content.value = theElement.innerHTML;">
<div style="background-color: yellow">
<br >
<p id="para1">This is a <em>test</em> paragraph.</p>
<br >
</div>
<br ><br ><hr >
<script type="text/javascript">
<!-- 
//获取元素para1的相关属性
var theElement = document.getElementById("para1");
//-->
</script>
<form name="testForm" id="testForm" action="#" method="get">
元素内容： 
<input type="text" name="content" id="content" size="60" > <br >
<input type="button" value="设置innerHTML" 
onclick="theElement.innerHTML = document.testForm.content.value;" >
<input type="button" value="设置innerText"
onclick="theElement.innerText = document.testForm.content.value;" >
<input type="button" value="设置outerText" 
onclick="theElement.outerText = document.testForm.content.value;" >
<input type="button" value="设置outerHTML" 
onclick="theElement.outerHTML = document.testForm.content.value;" >
<input type="button" value="重置" onclick="location.reload();" >
</form>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C

搜索代码 Ctrl + F

全屏模式 F11

切换主题 Ctrl + Shift + D

显示快捷键 ?

增大字号 Ctrl + =

减小字号 Ctrl + -