用JS改變HTML圖像和樣式


開始在function函數里面忘記在element加分號,然后路徑設置上本文件夾也不能多加/符號,但是可以用./表示當前目錄,../表示上級目錄。

然后就是注意括號,id。

match()方法,字符串匹配,在第一個改變圖像中,就是檢索到這個字符串就返回true,否則false,詳細用法 :http://www.w3school.com.cn/jsref/jsref_match.asp 


 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS2</title>
        <script>
        // <!-- <script type="text/javascript">
        // document.write("<h1>This is a heading</h1>");
        // document.write("<p>This is a paragraph</p>"); -->

        // <img id = "img" onclick = "changeimage" src="eg_bulboff.gif" >

        function changeimage()
        {
            element = document.getElementById("img");
            if (element.src.match("bulbon"))
            {
                element.src = "./eg_bulboff.gif";
            }
                else
                 {
                    element.src = "./eg_bulbon.gif";
                }

        }

        function changecolor()
        {
            x = document.getElementById("demo");
            x.style.color = "#ff0000";
        }
        </script>
    </head>
    <body>
        <p>
        <button type = "button" onclick = "alert('Welcome!')">點擊</button>
        <img id = "img" onclick = "changeimage()" src="eg_bulboff.gif">
        </p>

        <br>
        <button type="button2" name="button" onclick="changecolor()">點擊改變顏色</button>

        <p id = "demo">JavaSript能改變HTML元素的樣式</p>
    </body>
</html>


 


 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM