• 技术文章 >web前端 >js教程

    javascript怎么改变src属性值

    青灯夜游青灯夜游2021-07-16 14:38:50原创119

    javascript改变src属性值的方法:1、使用setAttribute()方法,语法“元素对象.setAttribute("src","属性值")”;2、利用HTML DOM的src属性,语法“元素对象.src="属性值"”。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    javascript改变src属性值

    方法1:使用setAttribute()方法

    setAttribute() 方法添加指定的属性,并为其赋指定的值。

    如果这个指定的属性已存在,则仅设置/更改值。

    示例:

    <!DOCTYPE html>
    <html>
    <body>
    
    <img src="img/1.jpg" width="200"/>
    
    <p id="demo">点击按钮来改变img标签src属性的值。</p>
    
    <button onclick="myFunction()">试一下</button>
    
    <script>
    function myFunction()
    {
    document.getElementsByTagName("img")[0].setAttribute("src","img/2.jpg"); 
    }
    </script>
    
    </body>
    </html>

    效果图:

    1.gif

    2、使用HTML DOM对象的src属性

    <!DOCTYPE html>
    <html>
    <body>
    
    <img src="img/1.jpg" width="200"/>
    
    <p id="demo">点击按钮来改变img标签src属性的值。</p>
    
    <button onclick="myFunction()">试一下</button>
    
    <script>
    function myFunction()
    {
    document.getElementsByTagName("img")[0].src="img/3.jpg"; 
    }
    </script>
    
    </body>
    </html>

    效果图:

    2.gif

    【推荐学习:javascript高级教程

    以上就是javascript怎么改变src属性值的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript src属性
    上一篇:如何理解javascript是动态语言 下一篇:javascript可以编写网页吗
    第16期线上培训班

    相关文章推荐

    • javascript如何删除和添加元素• javascript创建新节点方法是什么• javascript加入网页有几种方法• JavaScript中获取元素的方法有哪些• JavaScript有没有集合• javascript和java有关系吗

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网