1. 程式人生 > >DOM屬性的設定 和 屬性值的獲取

DOM屬性的設定 和 屬性值的獲取

<style type="text/css">
        .one{width: 300px;height: 300px;border: 1px solid red;padding :5px;}
</style>
<body>
    <img src="images/2.jpg" alt="" id="pic">
    <div id="box"></div>
</body>
<script>
        var img=document.getElementById('pic')
        var
o=document.getElementById('box');
</script>
        //方法一   node.屬性名=屬性值
         img.src='images/1.jpg';//屬性設定
         img.className='one'; //屬性值獲取

        //取值  node.屬性名
        console.log(img.src);//絕對路徑

    //方法二  node.setAttribute('屬性名',' 屬性值')

            img.setAttribute('src','images/1.jpg'
); img.setAttribute('class','one'); img.setAttribute('alt','提示'); //取值 node.getAttribute('屬性名');不需要轉換 var cls=img.getAttribute('class'); var s=img。getAttribute('src');//相對路徑 console.log(cls); console.log(s);

        //方法三  node['屬性']="值"
img['src']='images/1.jpg'; img['title']='我是圖片'; img['className']='one'; //取值 console.log(img['src']);//絕對路徑 console.log(img['title']);

屬性的設定:
node.屬性名=屬性值; 此方法特殊方法需要轉換 class—–>className
node.setAttribute( ‘屬性名’, 屬性值); 此方法特殊方法不需要轉換 class—–>class
node[ ‘屬性’ ]=屬性值; 此方法特殊方法需要轉換 class—–>className for

屬性值得獲取:
node.屬性名;
node.getAttribute(屬性名);
node[‘屬性名’];

注意:屬性的設定和獲取方法建議:配對使用