<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .a{ color: red; font-size: 30px; } p.active{ color: blue; } </style> </head> <body> <p title="小馬過河" id="p1" class="a">18歲</p> <script type="text/javascript"> // 若是是自定義的屬性,要在文檔上能看到,經過setAttribute設置屬性 var p1 = document.getElementById('p1'); console.log(p1.getAttribute('title')); console.log(p1.getAttribute('class')); // p1.setAttribute('class','abc'); // p1.setAttribute('adadad','1321313'); // console.log(p1.className); // console.log(p1.title); // p1.abc = 123; // console.dir(p1); // p1.onclick = function(){ // this.className = this.className +' active'; // } </script> </body> </html>
1.1javascript
var p1 = document.getElementById('p1'); console.log(p1.getAttribute('title')); console.log(p1.getAttribute('class'));
獲取屬性值 選取的對象.get屬性() : p1.getAttribute('title')
1.二、css
// 若是是自定義的屬性,要在文檔上能看到,經過setAttribute設置屬性
var p1 = document.getElementById('p1');
p1.setAttribute('class','abc');
p1.setAttribute('adadad','1321313');
console.log(p1.getAttribute('class'));
console.log(p1.getAttribute('adadad'));
對象. set屬性(‘鍵’,‘值’) 能夠修改已有屬性,能夠設置未設置屬性,能夠自定義屬性 p1.setAttribute('class','abc');html
1.三、java
var p1 = document.getElementById('p1'); console.log(p1.getAttribute('class')); p1.class='mcw' p1.aaa='bbb' console.log(p1.getAttribute('class')); console.log(p1.getAttribute('aaa')); console.log(p1.class); console.log(p1.aaa);
對象.屬性設置的屬性不能用get屬性得到,用對象.屬性得到this
而且元素行裏不顯示設置的屬性spa
1.四、增長屬性值。(好比添加多個類名)3d
p1.onclick = function(){ this.className = this.className +' active'; }
點擊一下就添加了類屬性值,也能夠用+=實現code