SOURCE

var box1 = document.getElementById('box1');
var btn = document.getElementById('btn');
btn.onclick = function(){
    box1.style.width = '200px';
    box1.style.height = '200px';
    //不能用background-color,会把横线当成减号，使用驼峰用法
    box1.style.backgroundColor = 'green';
}
//点击读取样式
var btn2 = document.getElementById('btn2');
btn2.onclick = function(){
    //通过style读取和设置的样式都是内联样式
    console.log(box1.style.width);
    console.log(box1.style.height);
    console.log(box1.style.backgroundColor);
}

var btn3 = document.getElementById('btn3');
btn3.onclick = function(){
    //获取元素当前显示的样式,只有ie支持
    // console.log(box1.currentStyle.width);
    //getComputedStyle()来获取元素的样式
    //第一个参数：要获取的元素，第二个参数：可以传递一个伪元素，一般都是null。是windows的方法可以直接使用
    //其他浏览器都支持，ie9以下不支持
    // var obj = getComputedStyle(box1,null);
    // console.log(obj.width);
    console.log(getStyle(box1,'width'));

}

function getStyle(obj, name){
    //正常浏览器
    //return getComputedStyle(obj,null)[name];
    //ie8
    //return obj.currentStyle[name];
    return window.getComputedStyle ? getComputedStyle(obj,null)[name] : obj.currentStyle[name];
}

var box2 = document.getElementById('box2');

var btn4 = document.getElementById('btn4');
btn4.onclick = function(){
    //clientWidth可见宽度
    //clientHeight可见高度
    //没有单位，可计算的
    //获取的宽度和高度是内容区加内边距。这些属性都是只读的，不能修改的
    console.log(box1.clientWidth);
    //offsetWidth、offsetHeight 包括边框
    console.log(box1.offsetWidth);
    //offsetParent 用来获取当前元素的定位父元素,只要position值不是staic就会开启定位
    //定位最近的祖先元素
    var op = box2.offsetParent;
    // alert(op);

    /**
     * offsetLeft 用来获取定位父元素的水平偏移值
     * offsetTop 用来获取定位父元素的垂直偏移值
     */
    alert(box2.offsetLeft);
    alert(box2.offsetTop);

    /**
     * 
     */
}

<button id="btn">点击一下</button>
<button id="btn2">点击一下</button>
<button id="btn3">点击一下</button>
<button id="btn4">点击</button>
<div id="box1" style="position:relative">
    <div id="box2" style="position:relative"></div>
</div>

#box1{
    background: red;
    width: 120px;
    height: 120px;
    margin-top: 20px;
    padding: 10px;
    border: 5px solid black;
}