网页 JavaScript的DOM操作

2024-09-27 04:27:57

　　今天，我首先对之前学习的内容进行了复习，然后学习了当鼠标指向某一个按钮时，切换对应的背景图片。

　　<div id="d1">
　　</div>
　　<input type="button" value="1" onmouseover="dj1()" id="j1" class="c1" style="background-color:#6F3"/>
　　<input type="button" value="2" onmouseover="dj2()" id="j2" class="c1"/>
　　<input type="button" value="3" onmouseover="dj3()" id="j3" class="c1"/>

　　

<script>
　　var a=document.getElementById("j1");
　　var b=document.getElementById("j2");
　　var c=document.getElementById("j3");
　　function dj1()
　　{
　　　　var aa=document.getElementById("d1");
　　　　aa.style.backgroundImage="url(6UPCKHIN3K5O0006.jpg)";
　　　　a.style.backgroundColor="#6F3";
　　　　b.style.backgroundColor="#CCC";
　　　　c.style.backgroundColor="#CCC";
　　}
　　function dj2()
　　{
　　　　var aa=document.getElementById("d1");
　　　　aa.style.backgroundImage="url(22.jpg)";
　　　　a.style.backgroundColor="#CCC";
　　　　b.style.backgroundColor="#6F3";
　　　　c.style.backgroundColor="#CCC";
　　}
　　function dj3()
　　{
　　　　var aa=document.getElementById("d1");
　　　　aa.style.backgroundImage="url(002-1.jpg)";
　　　　a.style.backgroundColor="#CCC";
　　　　b.style.backgroundColor="#CCC";
　　　　c.style.backgroundColor="#6F3";
　　}
</script>

　　之后，我学习了利用Window.document操作内容、样式和属性。

　　alert(a.innerHTML);标签里的html代码和文字都获取了

　　a.setAttribute("属性名","属性值");设置一个属性，添加或更改都可以；

　　a.getAttribute("属性名");获取属性的值；

　　a.removeAttribute("属性名");移除一个属性；

最新文章

热门文章