javascript点击按钮实现隐藏显示切换效果(javascript点击按钮改变字体颜色)

编辑：rootadmin

推荐整理分享javascript点击按钮实现隐藏显示切换效果(javascript点击按钮改变字体颜色)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:javascript点击按钮播放音频,javascript点击按钮,javascript点击按钮弹出对话框,javascript点击按钮执行,javascript点击按钮执行,javascript点击按钮左右移动,javascript点击按钮跳转页面,javascript点击按钮执行,内容如对您有帮助，希望把文章链接给更多的朋友！

本文实例分享了点击按钮实现隐藏和显示的切换代码，供大家参考，具体内容如下

javascript点击按钮实现隐藏显示切换效果(javascript点击按钮改变字体颜色)

效果图：

在不少应用中，都有这样的功能，点击同一个按钮可以实现一个元素的显示和隐藏的切换，下面就通过代码实例介绍一下如何实现此效果，代码如下:

以上代码实现了我们的要求，点击顶部链接可以实现div显示和隐藏的切换，下面介绍一下它的实现过程。实现原理：为链接注册onclick事件处理函数，此处理函数可以判断div的style.display属性值，如果为block则将其设置为none，也就是将div设置为隐藏状态，否则设置为block，也就是将div设置为显示状态，原理大致如此。需要特别注意的是，在div中，之所以使用style="display:block"的目的是让obj.style.display语句能够获取属性值，否则第一次点击无法将div设置为隐藏，大家可以去掉style="display:block"做一下测试，return false语句是为了防止链接的跳转效果。

关于return false可以参考本文：《学习jQuey中的return false》

标签: javascript点击按钮改变字体颜色

本文链接地址:https://www.jiuchutong.com/biancheng/381722.html 转载请保留说明！

上一篇：JavaScript检查子字符串是否在字符串中的方法(javascript查询)

下一篇：JavaScript获取对象在页面中位置坐标的方法(javascript获取对象方法属性)