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

<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 元素的大多数属性；