js 控制展开折叠 div html dom

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Title</title>
</head>
<body>
<!-- js 控制 展开 隐藏div  -->
<img src="data:image/down.png" onclick="test(this)">   <!--this 指 img 对象  --><div id="div2" style="border:1px solid #ccc; width:300px; height:200px; display: block;">（1）每个HTML标记都有事件句柄属性。onClick是HTML标记属性，不分大小写。（2）HTML标记对应的元素对象也具有事件句柄属性，这个属性必须全小写，因JS区分大小写
</div>
</body>
</html>
<script type="text/javascript">
function test(obj){var div1=document.getElementById("div2");if(div1.style.display=="block"){div1.style.display="none";obj.src="data:image/up.png";}else{div1.style.display="block";obj.src="data:image/down.png";}
}
</script>

转载于:https://www.cnblogs.com/gyz418/p/5161604.html

js 控制展开折叠 div html dom相关推荐

js 展开折叠动画原理，jquery的toggle切换效果
效果图: 想法: jquery的展开折叠动画效果很好看,想自己实现一个,结果发现仅仅只靠css添加类和动画是不行,最开始的思路是折叠时候设置高度为0,展开时设置高度设置为auto,让他自己撑开,可是t ...
CSS和JS实现内容折叠/展开效果
经常逛 CSDN 的朋友会发现如下效果:当代码行数超过指定高度的时候,会有折叠,点击展开按钮后才会展示全部. 这一效果在知乎.百度知道也很常见. 实现直接上代码 <!DOCTYPE html& ...
html折叠div,纯CSS折叠/展开div
我有一个纯CSS可折叠div,它是基于别人的代码,使用:target伪造类.我想设置的是一个有12个问题的页面,当你点击按钮,答案div扩展下面.我不知道如何使多个折叠div元素在这个页面上,没有编写 ...
js控制div内部滚动内容横向滑动位置
js控制div内部滚动内容横向滑动位置使用 js控制div内部的滚动内容横向滑动,主要应用在移动端,项目是基于angularJS,所以带有angular的点击方法ng-click,可以用原生js替换 ...
js控制div属性隐藏方法
原文详解:js控制div属性隐藏方法如题:编写html时如何用js控制div的显示和隐藏. 假定页面展示内容如下: 1.点击触发事件: <div><button class=&qu ...
网页loading效果可以通过js控制旋转速度
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
JS+CSS竖向折叠滑动菜单代码
代码简介: 折叠菜单,竖向展开,点击时缓慢展开,展开后可以作为菜单的栏目介绍等,还算不错. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
Vue 实现展开折叠效果
效果参见:https://segmentfault.com/q/1010000011359250/a-1020000011360185 上述链接中,大佬给除了解决方法,再次进行总结,方便以后使用. 除 ...
js控制audio音量
作者:hu_time 描述:记录一下学习的一个使用原生js控制audio音量的小案例,代码如下: html: <!DOCTYPE html> <html lang="en& ...

js 控制展开折叠 div html dom

js 控制展开折叠 div html dom相关推荐

最新文章

热门文章