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 元素的大多數屬性；