快捷导航
查看: 1430|回复: 2

[分享] js如何设置div的背景图片

[复制链接]
发表于 2013-10-16 10:27:47 | 显示全部楼层 |阅读模式
本帖最后由 antzone 于 2017-1-11 23:30 编辑

js如何设置div的背景图片:
本章节通过代码实例介绍一下如何利用js实现动态的为div元素设置背景图片。
核心代码片段如下:
[JavaScript] 纯文本查看 复制代码运行代码
odiv.style.backgroundImage="url('images/test.jpg')";

下面给出一个完整的代码实例,使用的背景图片如下:
ant.png
309x99的图片分隔为9份,每一份的长宽分别是103px和33px。
代码实例如下:
[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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()函数实现,具体可以参阅setAttribute()函数的用法详解一章节。
关于背景图片定位可以参阅CSS background-position定位详解一章节。
发表于 2017-1-11 00:28:09 | 显示全部楼层
非常好的js基础教程,我喜欢
发表于 2017-1-11 18:55:47 | 显示全部楼层
代码实例比较给力,支持一下

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们|手机版|小黑屋| 蚂蚁部落 ( 鲁ICP备10022556号-3 )

GMT+8, 2017-6-25 04:34 , Processed in 0.088513 second(s), 27 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

快速回复返回顶部 返回列表