Html OnClick更改背景圖片

單擊頁面時是否可以更改html頁面的背景？Html OnClick更改背景圖片

來源

2012-03-13 Toke Juhoklee Kejlow Nielsen

。 – 2012-03-13 09:12:09

是的，所有你需要做的就是應用一個css類，改變點擊事件的背景，如果你可以提供一個代碼sniplet我可以幫助你實現這一點。

來源

2012-03-13 09:14:32

等一下，你能用點擊事件改變身體的背景嗎？ – 2012-03-13 10:22:03

事情是這樣的：

<html> 
<head> 
    <title>Javascript Change Div Background Image</title> 

    <style type="text/css"> 

    #div1 { 
    width:100px; 
    height:30px; 
    background-image:url(images/blue.gif); 
    } 

    p { 
    font-family:Verdana; 
    font-weight:bold; 
    font-size:11px 
    } 

    </style> 

    <script language="javascript" type="text/javascript"> 
    function changeDivImage() 
    { 
     var imgPath = new String(); 
     imgPath = document.getElementById("div1").style.backgroundImage; 

     if(imgPath == "url(images/blue.gif)" || imgPath == "") 
     { 
      document.getElementById("div1").style.backgroundImage = "url(images/green.gif)"; 
     } 
     else 
     { 
      document.getElementById("div1").style.backgroundImage = "url(images/blue.gif)"; 
     } 
    } 
    </script> 

</head> 

<body> 

    <center> 
    <p> 
     This Javascript Example will change the background image of<br /> 
     HTML Div Tag onclick event. 
    </p> 
    <div id="div1"> 
    </div> 
    <br /> 
    <input type="button" value="Change Background Image" onclick="changeDivImage()" /> 
    </center> 

</body> 
</html>

但是，如果你使用jQuery，這將是一個更容易的事！如果您在使用jQuery只需編輯您的問題

$(function(){ 
    $("input").click(function(){ 
     $("body").css("background","url('otherimg.jpg')"); 
    }); 
});

來源

2012-03-13 09:15:32

$(function(){ 
$("input").click(function(){ 
    $("body").css({background-image:"url('imageName.gif')"}); 
}); 
});

通過JavaScript

來源

2012-03-13 09:16:37 Th0rndike

Html OnClick更改背景圖片

回答

相關問題