zoukankan      html  css  js  c++  java
  • 网页 JavaScript的DOM操作

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

      <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("属性名");移除一个属性;

  • 相关阅读:
    Git与GitHub的基本使用
    HTML&CSS基础-外边框
    HTML&CSS基础-内边框
    SHELL脚本编程变量输入
    GoLang基础数据类型-切片(slice)详解
    GoLang基础数据类型--->数组(array)详解
    SHELL脚本编程的运算符
    SHELL脚本编程变量详解
    HTML&CSS基础-边框简写属性
    GoLang基础数据类型--->字符串处理大全
  • 原文地址:https://www.cnblogs.com/hongsen3/p/5777166.html
Copyright © 2011-2022 走看看