zoukankan      html  css  js  c++  java
  • 用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>
    



  • 相关阅读:
    JSP(一)
    设计模式之UML类图
    Servle原理
    Servlet 浅谈(三)
    Servlet 浅谈(二)
    Servlet 浅谈(一)
    闲聊
    设计模式之装饰器模式
    struts2源码调试环境的搭建
    Github学习
  • 原文地址:https://www.cnblogs.com/zhangmingzhao/p/7256697.html
Copyright © 2011-2022 走看看