zoukankan      html  css  js  c++  java
  • 0815 document对象

    p{ color:#F00;
    font-size:36px;}
    #aa
    {
     500px;
     height:400px;
     position:relative;
     background-image:url(images/1.jpg);
     background-size:contain;
     background-repeat:no-repeat;}
    </style>
    <script type="text/javascript">
    document.write("<p>设置一个div,准备好3张图片,设置3个按钮,分别更改不同的背景,默认是第一张(类似于QQ空间更换主题)</p><br />123456789");
    </script>
    </head>

    <body>
    <div id="aa"></div><br />
    <input id="a" style="" type="button" value="第一张" onmouseover="change1()" />
    <input id="b" type="button" value="第二张" onmouseover="change2()" />
    <input id="c" type="button" value="第三张" onmouseover="change3()" /><br />
    <br />
    <img src="images/1.jpg" width="512" id="bb" /><br />
    <input style="" type="button" value="第一张" onmouseover="change11()" />
    <input type="button" value="第二张" onmouseover="change22()" />
    <input type="button" value="第三张" onmouseover="change33()" />

    </body>
    </html>
    <script>
    var a =document.getElementById("a");
    var b =document.getElementById("b");
    var c =document.getElementById("c");
    function change11()
    {
     var aa = document.getElementById("bb");
     aa.src="images/1.jpg";
     
    }
    function change22()
    {
     var aa = document.getElementById("bb");
     aa.src="images/2.jpg";
     
    }
    function change33()
    {
     var aa = document.getElementById("bb");
     aa.src="images/3.jpg";
     
    }

    function change1()
    {
     var aa = document.getElementById("aa");
     aa.style.backgroundImage ="url(images/1.jpg)";
     a.style.backgroundColor="#6F3";
     b.style.backgroundColor="#CCC";
     c.style.backgroundColor="#CCC";
    }
    function change2()
    {
     var aa = document.getElementById("aa");
     aa.style.backgroundImage ="url(images/2.jpg)";
     b.style.backgroundColor="#6F3";
     a.style.backgroundColor="#CCC";
     c.style.backgroundColor="#CCC";
    }
    function change3()
    {
     var aa = document.getElementById("aa");
     aa.style.backgroundImage ="url(images/3.jpg)";
     c.style.backgroundColor="#6F3";
     b.style.backgroundColor="#CCC";
     a.style.backgroundColor="#CCC";
    }
    </script>

  • 相关阅读:
    org.dom4j.DocumentException: null Nested exception: null
    严重: 文档无效: 找不到语法。 at (null:2:19)
    微信 群好友 的返回微信号 有阉割
    Perl 面向对象的真正意思
    门外汉怎么成就咨询大单(1)——北漂18年(39)
    Perl 微信模块--Weixin::Client
    Solr使用入门指南
    Perl 对象是函数的第一个参数
    haproxy 4层负载
    mysql 从读负载
  • 原文地址:https://www.cnblogs.com/a12110303043/p/5778535.html
Copyright © 2011-2022 走看看