04JS第三天 ----- js核心第一天 --- 设置/获取元素的css样式

6.1、设置css样式

语法： elementNode.style.css样式 = 值

css样式的写法：

①、一个单词的直接写即可。比如color height …

②、样式名称带中横线的，去掉中横线，后面单词首字母大写。比如fontSize lineHeight backgroundColor

6.2、获取css样式

使用 "node.style.样式名称" 的方式只能获取行内样式和js已经设置过的样式。

要想获取全部的样式，则必须使用下面的方法：

• 在IE中支持node.currentStyle.样式名称
• 火狐支持getComputedStyle(node).样式

为了兼容各个浏览器，所以需要自己封装一个函数，用于获取完整的css样式：

<p>nice to meet you!</p>

<script>

    //设置p元素的css样式，color是红色，背景颜色是金色。
    var p = document.getElementsByTagName('p')[0];

    p.style.color = 'red';
    p.style.backgroundColor = 'gold';

    /************ 获取元素的css样式 *************/
    /*var c = p.style.color;
    console.log(c);
    var f = p.style.fontSize;
    console.log(f);*/
    //获取完整样式的写法（非IE）
    //var f = getComputedStyle(p).fontSize;
    //console.log(f);

    //获取完整样式的写法（IE8）
    //var f = p.currentStyle.fontSize;
    //console.log(f);

    //兼容各个浏览器的获取完整css样式的写法
    function getStyle(node, styleName){
        if(node.currentStyle){
            //说明是IE
            return node.currentStyle[styleName];
        }else{
            return getComputedStyle(node)[styleName];
        }
    }

    console.log(getStyle(p, 'fontSize'));

</script>