JavaScript点击div来回切换两个颜色及两张图片切换的方法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript点击div来回切换两个颜色及两张图片切换的方法相关的知识，希望对你有一定的参考价值。
点击div切换颜色的代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .test1{ width:100px; height: 100px; background-color: green; } </style> <script type="text/javascript"> function myFunction(){ var test1 = document.getElementById(‘test1‘); if(test1.style.backgroundColor==‘yellow‘){ test1.style.backgroundColor=‘green‘; }else{ test1.style.backgroundColor=‘yellow‘; } } </script> </head> <body> <div class="test1" id="test1" alt="" onclick="myFunction()"> </div> </body> </html>
这里有一个疑问就是：如果js语句中颜色代码为十六进制则不显示效果。目前还没有解决这个问题 求大神指教QAQ
点击图片来回切换：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> function toggle(){ var test1 = document.getElementById(‘test1‘); if(test1.src.indexOf(‘on‘) >= 0){ test1.src="./images/off.png"; }else{ test1.src="./images/on.png"; } } </script> <img id="test1" src="./images/on.png" alt="" onclick="toggle()" /> </body> </html>
以上是关于JavaScript点击div来回切换两个颜色及两张图片切换的方法的主要内容，如果未能解决你的问题，请参考以下文章
怎么用js点击按钮改变网页主题，就是把颜色换一下，再次点击在换回来，就这样点击来回切换？
jquery效果，多个div，点击任何一个div，那么这个div会切换文字，变换背景颜色，再次点击其他的div ,这个div会发生刚才的变化，之前点击的div的颜色会变回来