第一百一十六节，JavaScript，DOM操作样式

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数
    //检测浏览器是否支持DOM1级CSS能力或DOM2级CSS能力
    alert(‘DOM1级CSS能力：‘ + document.implementation.hasFeature(‘CSS‘, ‘2.0‘));
    alert(‘DOM2级CSS能力：‘ + document.implementation.hasFeature(‘CSS2‘, ‘2.0‘));
};

//<div id="box" style="color: #ff2217; background: #fff137; font-size: 20px; float: right;">测试1</div>
window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数
    var yshi = document.getElementById(‘box‘);  //通过ID获取到目标节点
    alert(yshi.style); //style属性，获取元素节点的行内style样式，也就是行内css样式，返回样式的集合
    //返回：[object CSS2Properties] 样式集合

    //通过样式属性名称，获取属性值
    alert(yshi.style.color);  //查看color颜色属性值
    //返回;rgb(255, 34, 23) 浏览器计算过的颜色属性值

    alert(yshi.style.background); //查看背景颜色属性值
    //返回;#fff137   浏览器计算过的颜色属性值

    alert(yshi.style.fontSize);  //查看字体大小属性值
    //注意：属性名称单词如果是两段或者三段的，如：font-size，在写属性名称时将(-)分隔符去掉，分隔符后面的第一个字母大写，如：fontSize
    //返回：20px

    //alert(yshi.style.float);  //查看浮动属性值，
    //注意：float 是js的保留字，如果遇到关键字或保留字，在属性名称前加小写的css,然后将属性名称第一个字母大写，如下
    //alert(yshi.style.cssFloat); //查看浮动属性值，
    //但是cssFloat    IE浏览器不支持，IE可以将前面的css换成style，如：styleFloat
    //alert(yshi.style.styleFloat);
    //但是styleFloat   除了IE外其他浏览器也不支持
    //所以我们需要做一个兼容
    //做一个逻辑或，第一个不支持，就会用第二个
    alert(yshi.style.cssFloat || yshi.style.styleFloat);    //非IE用cssFloat，IE用styleFloat
    
};

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数
    var yshi = document.getElementById(‘box‘);  //通过ID获取到目标节点
    //三元运算，判断如果浏览器支持cssFloat就用cssFloat，如果不支持就用styleFloat
    typeof yshi.style.cssFloat != ‘undefined‘ ? yshi.style.cssFloat = ‘right‘ : yshi.style.styleFloat = ‘right‘;
};