zoukankan      html  css  js  c++  java
  • 一个简单且丑陋的js切换背景图片基础示例

    不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS范例</title>
    <script type="text/javascript">
    
    function changeBg(){
        var domobj = document.getElementById('bg');//获取dom元素
        var bgsrc_a = domobj.getAttribute("data-bg1");
        var bgsrc_b = domobj.getAttribute("data-bg2");
        domobj.style.backgroundImage='url('+bgsrc_b+')';
        
        //两属性位置互换
        domobj.setAttribute('data-bg1',bgsrc_b);
        domobj.setAttribute('data-bg2',bgsrc_a);
    
    }
    </script>
    
    <style type="text/css">
    #bg{ 200px; height:80px; background-repeat:no-repeat; background-image:url(http://www.yilewan.com/resource/images/logo.png);}
    </style>
    </head>
    
    <body>
    <a href="javascript:;" onclick="changeBg();">点击切换</a>
    <hr />
    
    <div id="bg" data-bg1='http://www.yilewan.com/resource/images/logo.png' data-bg2='http://www.58game.com/resource/images/logo_58game.png'></div>
    </body>
    </html>
  • 相关阅读:
    Maven Resources Plugin
    Git Delete Last Commit
    查看剩余空间
    使用 Jython 连接 Apache Derby 数据库
    JVM动态语言比武
    jython embedded into java
    maven testNG
    why clojure?
    jython一小时学会
    gnote
  • 原文地址:https://www.cnblogs.com/zhucheer/p/3861297.html
Copyright © 2011-2022 走看看