DOM屬性的設定 和 屬性值的獲取
阿新 • • 發佈:2018-12-21
<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[‘屬性名’];
注意:屬性的設定和獲取方法建議:配對使用