JS 元素的基本操作


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

<div title='test' style="" onmouseout="this.style.background = 'orange'">
    <span>234567890</span>
</div>

<script type="text/javascript">
//获取元素
var div = document.getElementsByTagName('div')[0];

//属性操作
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>