js DOM : 样式操作

设置类名  className

var btn.className = 'cancel';

设置样式（凡是在脚本中修改的样式，都是内联样式）

btn.style.display = 'block';
btn.width = '100px';
btn..backgroundColor = '#000';
btn['background-color'] = '#000';

获取设置p元素文本内容 textContent （返回当前节点包含的文本）

<p>神奇啊</p>

<script>
    var p = document.querySelector('p');
    console.log(p.textContent); // 获取
    p.textContent = '我变了'; // 设置
</script>

获取dom元素的全部样式，getComputedStyle(dom), 只读属性， 不可修改

<script>
    // 获取元素div
    var div = document.querySelector('.box');
    // 获取div元素的全部样式
    var style = getComputedStyle(div);
    // 读取div的宽度
    console.log(style.width);
    // 读取div的高度
    console.log(style.height); 
</script>

获取html  innerHTML （返回当前节点包含的html以及文本）

<div class="box">
    <p>急死俺的</p>
    <h2>标题</h2>
</div>

<script>
    var div = document.querySelector('.box');
    var html = div.innerHTML;
    console.log(html); // 输出如下图  
    div.innerHTML = 'HELLO WORD！';  
</script>

html在控制台输出如左图

 

innerText  返回当前节点包含的文本/IE8