JS 元素的基本操作

2017-08-22 16:46:54 Albin Wong 1445

```html

div{
    width:200px;height:200px;background:orange
}
.active{
    border:solid 10px #ddd;
    background:black;
}

//属性操作
div.setAttribute('class','item'); //属性的添加
var title = div.getAttribute('title'); //属性的获取
div.removeAttribute('title'); //属性的删除

//文本操作
    //获取
    var html = div.innerHTML;//innerHTML能获取标签中间的自标签
    var res = div.textContent;//textContent不能获取自标签
    //设置
    div.innerHTML = '<a href="">test</a>';// innerHTML在设置文本的时候 是可以解析html标签的
    div.textContent = '<a href="">abc</a>';// textContent是不能解析标签的

//样式操作
    //样式的获取  style
    var css = window.getComputedStyle(div);
    var bgColor = css.backgroundColor;

//样式的设置
    div.style.background = 'red'; //通过style属性
    通过class类名的方式来修改元素样式  注意: 一定要保证当前所添加的这个class的样式规则权重要最高.
    div.setAttribute('class','active'); 
    div.className = 'active';

//事件绑定
div.onclick = function() {
    this.style.background = 'yellowgreen';
}

div.addEventListener('mouseover', function() {
    this.style.background = 'red';
});
</script>
```

(3) Comments

John Doe- Reply

February 26, 2013 at 1:18 pm
- saqib sarwar- Reply
  
  February 26, 2013 at 1:20 pm
  
  Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
John Doe- Reply

February 26, 2013 at 1:27 pm

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

Comment

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

JS 元素的基本操作

(3) Comments

John Doe- Reply

saqib sarwar- Reply

John Doe- Reply

Leave a Reply