操作元素之修改元素属性

以你之姓@ 2023-10-03 14:27 21阅读 0赞

操作元素之修改元素属性

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>操作元素之修改元素属性</title>
        <style>
            img {
          
                width: 300px;
            }
        </style>
    </head>
    
    <body>
        <button id="ldh">刘德华</button>
        <button id="zxy">张学友</button> <br>
        <img src="https://pic.imgdb.cn/item/6120ef224907e2d39c002925.jpg" alt="" title="刘德华">
    
        <script>
            // 修改元素属性  src
            // 1. 获取元素
            var ldh = document.getElementById('ldh');
            var zxy = document.getElementById('zxy');
            var img = document.querySelector('img');
            // 2. 注册事件  处理程序
            zxy.onclick = function () {
          
                img.src = 'https://pic.imgdb.cn/item/6120ef464907e2d39c007048.jpg';
                img.title = '张学友';
            }
            ldh.onclick = function () {
          
                img.src = 'https://pic.imgdb.cn/item/6120ef224907e2d39c002925.jpg';
                img.title = '刘德华';
            }
        </script>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关操作元素之修改元素属性

操作元素之修改元素属性 <!DOCTYPE html> <html lang="en"> <head> <meta char

以你之姓@/ 2023年10月03日 14:27/ 0 赞/ 22 阅读

相关 jquery获取与修改元素的style属性

//获取 div 的高度 $("div").css("height"); //设置 div 的高度 $("div").css("hei

雨点打透心脏的1/2处/ 2023年02月14日 15:58/ 0 赞/ 15 阅读

相关 JavaScript（JS）获取元素、改变元素的内容、修改属性

文档对象模型DOM 文档对象模型DOM是W3C组织推荐的处理可扩展标记语言的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结

淡淡的烟草味﹌/ 2022年12月21日 13:59/ 0 赞/ 401 阅读

相关【js】原生JS获取元素和修改元素属性

原生js获取标签可以使用内置对象document，获取到标签之后可以直接获取或修改属性 1.document获取标签 getElementById() 根据id

ゝ一世哀愁。/ 2022年11月26日 12:00/ 0 赞/ 233 阅读

相关十六、使用jQuery操作元素 —— DOM属性与HTML元素属性

在jQuery官方文档中，分别是这样对应的。属性：Attributes；CSS：CSS。区分DOM属性和HTML元素属性 HTML元素的属性大家应该都知道，比如<img>

╰半橙微兮°/ 2022年10月03日 00:32/ 0 赞/ 279 阅读

相关字符串元素修改

[vjudge题目链接][vjudge] 紫书3-A think: 1题目意思：输入几行字符串，将文本中中的第一个”转换成“，第二个”转换成”，不会出现嵌套 2字符

ゞ浴缸里的玫瑰/ 2022年09月30日 06:10/ 0 赞/ 189 阅读

相关修改HTML元素

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type

清疚/ 2022年09月21日 04:50/ 0 赞/ 150 阅读

相关 javascript根据元素自定义属性获取元素，操作元素

转自[javascript根据元素自定义属性获取元素，操作元素][javascript] function getElementByAttr(tag,attr,val

妖狐艹你老母/ 2022年06月16日 06:29/ 0 赞/ 819 阅读

相关 js document-操作元素属性

操作元素固有属性查看获取对象后通过.的方式获取 var inp=document.getElementById("uname")

àì夳堔傛蜴生んèń/ 2021年07月24日 19:35/ 0 赞/ 490 阅读

相关 jq 操作元素属性

操作元素属性获得元素属性数组对象.attr("属性名"); 不能拿到value的实时值，只能拿到默认值数组对象.val()

快来打我*/ 2021年07月24日 19:02/ 0 赞/ 536 阅读