JavaScript 属性_jupiter属性的目标-优快云博客

本文链接：https://blog.youkuaiyun.com/Jupiter_zhao/article/details/100733781

本文深入讲解了DOM中属性的取值和赋值方法，包括使用对象.属性名、getAttribute、setAttribute及对象[属性名]等不同方式，并通过具体示例展示了如何在实际代码中操作这些属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM属性操作：

1.属性的取值

                1)对象.属性名
                    注意：针对特殊属性需要变形  例如：class-->className
                2)getAttribute(属性名)
                    注意：属性名和HTML严格保持一致
                3)对象[属性名]

<div id="box"></div>
    
    <input type="text" id="txt">
    <script>
        var oImg = document.getElementById('pic');
        var t = document.getElementById('txt');

         t.value = oImg.src; //属性的取值，赋值
         </script>

2.属性的赋值

                1)对象.属性名=值;
                    注意：针对特殊属性需要变形  例如：class-->className
                2)setAttribute(属性名,属性值)
                    注意：属性名和HTML严格保持一致
                3) 对象[属性名]=值;

<div id="box"></div>
    <img src="images/1.jpg" alt="" id="pic">
    <input type="text" id="txt">
    <script>
        var oImg = document.getElementById('pic');
        var t = document.getElementById('txt');
        //属性赋值
        t.value='hello world';
        t.setAttribute('value','hello everyone');
         o.setAttribute('class','one');
         oImg.setAttribute('src','images/2.jpg');
         oImg['src']='images/3.jpg';
        o['className']='two';
        </script>