style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题

style设置/获取样式的问题：
1.js通过style方法
    --加样式：加的是行间样式 oDiv.style.width="20"+'px';
    --取样式：取得是行间样式    alert(oDiv.style.width)
    --当css写在样式表里(即css全部写在行外)的时候获取不到 --alert(oDiv.style.width)是错误的
行内样式的优先级最高,当js通过style方法添加了样式之后,
js再通过修改class的值为同一元素增加样式,最终行内样式优先起作用,
在写js时最好统一只操作style或者class,不要同时操作

2.如何获取元素的行外样式:(样式全写在style标签里，或者一个.css 文件里)
    获取行外样式：
        IE: currentStyle
        Chrome,FF: getComputedStyle(oDiv,false).width
        兼容两个浏览器的写法:
        if(oDiv.currentStyle){
            alert(oDiv.currentStyle.width);
        }else{
            alert(getComputedStyle(oDiv,false).width);
        }
    *注:在解决很多兼容性写法时,都是用if..else..

    封装一个获取行外样式的函数:
        funtion getStyle(obj,name){
            if(obj.currentStyle){
                //IE
                return obj.currentStyle[name];
            }else{
                //Chrom,FF
                return getComputedStyle(obj,false)[name];
            }
        }
        调用：getStyle(oDiv,'width');

对于样式可分为：
    单一样式:width,height,font-size等
    复合样式：background,border
    而currentStyle只能取单一样式,无法取复合样式
    要想取：getStyle(oDiv,'backgroundColor');

3.通过js如何为元素修改class属性值/添加class属性
    js中任何标签的任何属性都可以修改,修改时HTML里面怎么写js里面就怎么写,
    document.getElementbyId('#box').style.background="red";
    document.getElementbyId('#box').href="demo.css";
    但是有一个例外,就是不可以这样修改class属性
    修改时应该为document.getElementbyId('box').className='bigBox';
    这样就为id为box的元素，添加了一个名为bigBox的class属性。
    因为class为html 里面的关键字/保留字,不可以修改,
    (所有的关键字/保留字都不可以修改)

4.js中两种操作属性的方法:
        1)oTxt.value="111111"
        2)oTxt['value']='1111'
    在所有操作属性的方法中,第一种方法都可以用第二种方法代替,但是第一种方法比较方便
    但元素属性作为函数的参数来传参时,操作属性只能用第二种方法,用第一种会有错误
        function change(name,val){
            var oDiv=document.getElementbyId('div');
            oDiv['style'][name]=value;
        }
    <div id="div" onclick="change('background','red')"></div>

offsetWidth/offsetHeight的问题:
offset的知识点:
offsetWidth/offsetHeight/offsetLeft/offsetTop: 获取的都是盒模型尺寸
  --获取元素距离'父元素'而言的距离(左边距,即获取物体的位置)
    --综合考虑影响物体位置的因素(width,margin)
    --使用时：只能获取,并不能设置'oDiv.offsetLeft=20px'是错误的,要通过odiv.style.left设置
offset的bug:
    当使用 oDiv.style.width=oDiv.offsetwidth-4+'px' 来设置物体的样式时，最终物体的宽可能不变窄,反而会增加
    应为offset获取的物体盒模型的样式,减掉之后可能比物体实际的宽要大
    注**我们平时用oDiv.style.width=oDiv.offsetwidth-1+'px'
            而不用oDiv.style.width=oDiv.style.width-4+'px' 是因为style只能取行间样式,
            而我们平时的样式都写在外面的样式表里面,style的方法获取不到,所以用offset来获取,
            但是当offset出现问题时,我们可以把样式写在样式表里面,通过
            oDiv.style.width=oDiv.style.width-4+'px'来设置，但这种方法不是很好,不能实现表现层与结构层的分离,
            所以我们可以通过上面封装的getStyle()函数获取行外样式，来代替offset，
            var oDiv=document.getElementById('div1');
            var wi=getStyle("oDiv","width");
            oDiv.style.width=wi-10+'px';        //这种方法是最准确的获取和设置样式的方法

            function getStyle(obj,styleName){
                if(obj.currentStyle){
                    //IE
                    return obj.currentStyle[styleName];
                }else{
                    //Chrom,FF
                    return getComputedStyle(obj,false)[styleName];
                }
            }

    注:以后用offset时最好都换成使用这个函数,才不会出问题