首页 > 编程语言 > 详细

JavaScript001,鼠标点击改变文字或图片

时间:2019-12-17 13:14:31      阅读:93      评论:0      收藏:0      [点我收藏+]
<h3>我的第一个Javascript</h3>
        <p id="demo1">1.点击按钮,改变内容!</p>
        <!-- 设置id,方便查找 -->
        
        <button type="button" onclick="myFunction()">按钮</button>
        <!-- 当鼠标点击按钮时,执行myFunction()里的代码 -->
        
        <script type="text/javascript">
            function myFunction(){//myFunction(),方法名
                x=document.getElementById(demo1);//查找id=‘demo1‘的元素
                x.innerHTML=我是被改变后的内容!;//改变内容
            }
        </script>
<p>2.点击按钮或图片,改变图片!</p>
        <img id="demo2" width="100px" height="100px" onclick="myFunction2()" src="img/black.png">
        <br/>
        <button type="button" onclick="myFunction2()">按钮</button>
        
        <script type="text/javascript">
            function myFunction2(){
                y=document.getElementById(demo2)
                if (y.src.match(black)){
                /* y.src.match(‘black‘):查找id=‘demo2‘的元素里的src地址
                有没有包含black字符串,有就执行if,没有就执行else*/
                    y.src=img/green.png;
                    /* 替换img标签里src的值 */
                }
                else{
                    y.src=img/black.png;
                    /* 替换img标签里src的值 */
                }
            }
        </script>
<p id="demo3" onclick="myFunction3()" style="color: black;">3.点击文字或按钮,改变文字颜色!</p>
        <button type="button" onclick="myFunction3()">按钮</button>
        
        <script type="text/javascript">
            function myFunction3(){
                z=document.getElementById(demo3)
                if(z.style.color.match(black)){
                    /* 判断id=‘demo3‘的标签里,属性值是否有black字符串,
                    有执行if,没有执行else */
                    z.style.color=red;
                }else{
                    z.style.color=black;
                }
            }
        </script>

 

好像没什么说的,都在注释里了,在菜鸟教程做的笔记,JavaScript 能够改变任意 HTML 元素的大多数属性;

JavaScript001,鼠标点击改变文字或图片

原文:https://www.cnblogs.com/zhou0910/p/12053494.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!