<!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