📄 17-2.htm

📁 php 和 ajax 开发的一些资料
💻 HTM
字号:
<html>
<head>
<title>
使用JavaScript访问DOM元素的属性与方法
</title>
<script language="javascript">
function f1()
{
  element=document.getElementById("title");
  temp=element.getAttribute("size");
  alert(temp);
}
function f2()
{
  element=document.getElementById("title");
  temp=element.getAttribute("color");
  alert(temp);
}
function f3()
{
  element=document.getElementById("title");
  temp=element.innerHTML;
  alert(temp);
}
function f4()
{
  element=document.getElementById("title");
  temp=element.hasChildNodes;
  if(temp)
  {
    str="有子元素";
  }
  else
  {
    str="无子元素";
  }
  alert(str);
}
function f5()
{
  element=document.getElementsByTagName("img");
  temp=element[0].getAttribute("src");
  alert(temp);
}
function f6()
{
  element=document.getElementsByTagName("img");
  temp=element[0].getAttribute("border");
  alert(temp);
}
function f7()
{
  element=document.getElementsByTagName("img");
  temp=element[0].getAttribute("alt");
  alert(temp);
}
function f8()
{
  element=document.getElementsByTagName("img");
  temp=element[0].hasChildNodes;
  if(temp)
  {
    str="有子元素";
  }
  else
  {
    str="无子元素";
  }
  alert(str);
}
function f9()
{
  element=document.getElementById("message");
  temp=element.getAttribute("width");
  alert(temp);
}
function f10()
{
  element=document.getElementById("message");
  temp=element.getAttribute("height");
  alert(temp);
}
function f11()
{
  element=document.getElementById("message");
  temp=element.getAttribute("bgcolor");
  alert(temp);
}
function f12()
{
  element=document.getElementById("message");
  temp=element.innerHTML;
  alert(temp);
}
</script>
</head>
<body>
<font id="title" size="5" color="#FF0000">访问元素的属性与方法</font>
<p>
<img src="1.png" border="1" alt="这里是提示文本">
<p>
<div id="message" width="10" height="100" bgcolor="#cccc00">这里有一个层</div>
<p>
<input type="button" value="title的大小" onclick="f1()">
<input type="button" value="title的颜色" onclick="f2()">
<input type="button" value="title的内容" onclick="f3()">
<input type="button" value="title有无子元素" onclick="f4()">
<p>
<input type="button" value="img的地址" onclick="f5()">
<input type="button" value="img的边框" onclick="f6()">
<input type="button" value="img的提示文字" onclick="f7()">
<input type="button" value="img有无子元素" onclick="f8()">
<p>
<input type="button" value="message的宽度" onclick="f9()">
<input type="button" value="message的高度" onclick="f10()">
<input type="button" value="message的背景色" onclick="f11()">
<input type="button" value="message的值" onclick="f12()">
</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -