js点击事件更换背景图片

JavaScript029

js点击事件更换背景图片,第1张

1：div22.style.background = "red"这样可以实现div22这个元素的背景颜色为红色。而div22添加的样式是内联样式。2：所以内联样式？你需要知道一下什么是内联样式。也就是这个元素本身的style属性中的css样式，这里的style属性中国的css样式权重值最高。3：在内联样式中，如果想要写一个背景图片那么就需要这样写才能生效：<div style="background-image：url('img/1.jpg')"></div>4：所以在js中动态添加或这更改背景图片就需要这样：div22.style.backgroundImage = "url('img/1.jpg')"5：对以上会打有哪里不理解的请指正或者追问

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<button type="button" id="button_A">changeBackground</button>

<script type="text/javascript">

    function logo() {

        var btn = document.getElementById("button_A")

        i = 0

        var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg"]

        btn.addEventListener("click", function () {

            if (i == 6) {

                i = 0

            }

            document.body.style.backgroundImage = "url('"+imgArr[i]+"')"

            i++

        })

    }

    logo()

</script>

</body>

</html>

用您的改进后的代码,js代码必须再按钮的标签后面(要不然需要再监听dom加载完毕后执行js),i不应该一直加下去,会出错！

参考:http://www.w3school.com.cn/jsref/prop_style_backgroundimage.asp

<script type="text/javascript">

function change() {

document.getElementById("img").src = "../../Styles/icons/help2.png"

}

</script>

<img id="img" onclick="change()" src="../../Styles/icons/help.png"/>

//img 本身有一个点击事件 不需要服务器控件，用js就能实现了！