JS学习三-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40486739/article/details/89737163

博客介绍了使用JS动态改变背景图片的方法，以隐藏和显示的点击按钮为例，默认箭头向上，点击可切换箭头方向。还提及项目路径及需改变背景图片的模块ID，阐述了通过JS改变点击模块背景图片实现箭头朝向切换的原理。

使用js动态的改变背景图片：

示例：一个隐藏和显示的点击按钮的背景图片，默认箭头指示向上，点击隐藏，箭头向上，再点击向下

<script type="text/javascript">
    	
    	var count = 0;
        //设置默认箭头的方向
    	var arrow = document.getElementById("arrow");
    	arrow.style.backgroundImage = "url('<%=projectPath%>/admin/home/images/icon-btnMore-up.png')";
    	arrow.style.backgroundRepeat = "no-repeat";
    	arrow.style.backgroundPosition = "center";
    	//点击之后的方向
    	$("#arrow").click(function() {
    		if (count == 0) {//点击向下
    			arrow.style.backgroundImage = "url('<%=projectPath%>/admin/home/images/icon-btnMore-down.png')";
    			arrow.style.backgroundRepeat = "no-repeat";
    			arrow.style.backgroundPosition = "center"; 
    			count = 1;
    		} else {//点击向上
    			arrow.style.backgroundImage = "url('<%=projectPath%>/admin/home/images/icon-btnMore-up.png')";
    			arrow.style.backgroundRepeat = "no-repeat";
    			arrow.style.backgroundPosition = "center"; 
    			count = 0;
    		}
    	});
    	
    </script>

<%=projectPath%>：项目路径

arrow：需要改变背景图片的模块ID

实现原理：使用js动态的改变点击模块的背景图片来实现隐藏和显示时的箭头朝向