请尽可能多的方法简述如何实现以下JS效果“一张网页上有一个按钮点击按钮,点击它不刷新网页,”
请尽可能多的方法简述如何实现以下JS效果“一张网页上有一个按钮点击按钮,点击它不刷新网页,并且在按钮下显示一张图片,再次点击该按钮,隐藏该图片,同样不刷新网页”...
请尽可能多的方法简述如何实现以下JS效果“一张网页上有一个按钮点击按钮,点击它不刷新网页,并且在按钮下显示一张图片,再次点击该按钮,隐藏该图片,同样不刷新网页”
展开
展开全部
//不刷新网页,那么只能操作DOM和样式了
<html>
<body>
<button onclick="togglePic()">图片显示隐藏切换</button>
<div id="imgDiv">
<img id="img" src="1.jpg" />
</div>
</body>
</html>
<script type="text/javascript">
//样式操作
var fn1 = function(){
var imgObj = document.getElementById("img");
var s = imgObj.style.display;
if(s != 'none'){
imgObj.style.display = 'none';
}else{
imgObj.style.display = 'block';
}
}
//操作DOM
var fn2 = function(){
var divObj = document.getElementById('imgDiv');
var h = divObj.innerHTML;
if(h != ''){
divObj.innerHTML = '';
}else{
divObj.innerHTML = '<img id="img" src="1.jpg" />';
}
}
//调用
var togglePic = function(){
fn1();
}
</script>
//以上为原生JS操作,jquery也可以实现。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询