JavaScript 操纵css样式
HTML DOM 对象
?
从 JavaScript 的观点来看，网页上的每个 HTML 标签都是一个 DOM 对象，标签的属性也是 DOM 对象的属性。如：
从 JavaScript 的观点来看，这个 返回的是一个 Image 对象数组，每个元素对应于网页中的一个 <button onclick="setBorder(0)">border="0"</button>
<button onclick="setBorder(1)">border="1"</button>
<button onclick="setBorder(3)">border="3"</button>
<button onclick="setBorder(8)">border="8"</button>
<script type="text/javascript">
function setBorder( n )
{
???? document.getElementById( "image1" ).border = n;
}
</script><button onclick="setBox1()"> 1 </button>
<button onclick="setBox2()"> 2 </button>
<button onclick="setBox3()"> 3 </button>
<script type="text/javascript">
function setBox1()
{
???? document.getElementById( "box" ).innerHTML = "欢迎光临！";
}
function setBox2()
{
???? document.getElementById( "box" ).innerHTML = "<h1>欢迎光临！</h1>";
}
function setBox3()
{
???? document.getElementById( "box" ).innerHTML = '<img src="./image/2.jpg" />';
}
</script>
效果为：
?
?
1 ??2 ??3
本例可以通过按钮设置 属性设置值来修改标签中包含的文本。
<p>
<button onclick="setLink(); this.disabled=true">修改链接</button>
</p>
<script type="text/javascript">
function setLink()
{
???? document.getElementById( "a1" ).href = "http://www.163.com/";
???? document.getElementById( "a1" ).innerHTML = "网易";
}
</script>
效果为：
包头师范学院
修改链接
本例定义了一个超链接，利用按钮可以修改链接的文本和目的地址。
在 JS 程序中， 属性对应的是 属性对应的是 <a> 标签包含的内容。
注意一个小细节，当单击“修改链接”按钮后，这个按钮就变得不可用了。这个功能是通过按钮中的 onclick="setLink(); this.disabled=true" 实现的。也就是说，在一个事件句柄的取值中，可以包含多个 JS 语句，它们之间用“;”分界。
