JavaScript设置背景图片

本章节通过代码实例介绍一下如何利用js实现动态的为div元素设置背景图片。 核心代码片段如下: [JavaScript] 纯文本查看 复制代码运行代码 1 odiv.style.backgroundImage="url('images/test.jpg')"; 下面给出一个完整的代码实例，使用的背景图片如下: 309x99的图片分隔为9份，每一份的长宽分别是103px和33px。 代码实例如下: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <!doctype html> <html> <head> <meta charset="utf-8"> <title>设置背景图片</title> <style type="text/css"> #ant {   width:400px;   height:300px;   background-color:#ccc; } </style> <script> window.onload = function () {   var odiv = document.getElementById("ant");   var obt = document.getElementById("bt");   obt.onclick = function () {     odiv.style.backgroundImage = "url('mytest/demo/mybg.png')";     odiv.style.backgroundRepeat = "no-repeat";     odiv.style.backgroundPosition = "0px -33px";   } } </script> </head> <body> <div id="ant"></div> <input type="button" id="bt" value="查看演示"/> </body> </html> 上面的代码实现了使用js设置元素背景的功能，可以看出背景图片会覆盖背景色。 （1）.backgroundImage用来设置背景图片路径。 （2）.backgroundRepeat用来设置背景图片的重复规则。 （3）.backgroundPosition用来设置背景图片的定位。 也可以使用setAttribute()函数实现