JS18-DOM操作之标签的样式

<style>
    div{
        font-size: 50px;
        color: green;
    }
</style>
</head>
<body>
<div style="background:blue">北京</div>

<script>
    // DOM操作之标签的样式

    // 1,给标签设定样式
    // 标签对象.style.属性 = 属性值

    // 2,获取标签设定的样式
    // 标签对象.style.属性


    var oDiv = document.querySelector('div');
    // 通过 标签对象.style.属性 = '属性值'
    // 设定的是标签的行内样式
    // oDiv.style.color = 'red';

    // 获取样式

    // 行内样式,正确获取
    console.log( oDiv.style.color );
    console.log( oDiv.style.background );
    // 非行内样式,获取的结果是空字符串
    console.log( oDiv.style.fontSize );


    // 获取标签执行的样式属性
    // 不管行内还是非行内,获取的是,最终执行的样式属性值
    // 例如: 外部样式,被行内样式优先级 覆盖, 
    // 获取的结果,就是最终执行的 行内样式

    // 一般浏览器 值得是 非低版本IE浏览器
    // window.getComputedStyle(标签对象).属性

    // 低版本IE浏览器方法
    // 标签对象.currentStyle.属性
    
    // 获取的是标签最终执行的样式的属性值
    // 如果是颜色,获取的是 rgb() 的形式

    // console.log(window.getComputedStyle(oDiv).fontSize);
    // console.log(window.getComputedStyle(oDiv).color);

    // console.log(oDiv.currentStyle.fontSize);

    // 兼容处理方案
    // 不能像之前,做 || 逻辑赋值
    // 因为此时是JavaScript报错,会终止之后程序的执行
    // 兼容处理方法是 使用 if判断
    // 如果 window.getComputedStyle 这种方法没有,执行结果是 undefined  没有这个方法
    // 如果 window.getComputedStyle 这种方法有,就会有一个返回值
    
    // if( window.getComputedStyle )

    //   如果 window.getComputedStyle 没有 结果是 undefined 
    //       if( undefined )  --->  if( false )
    //       就调用  标签对象.currentStyle.属性
    //   如果 window.getComputedStyle  有  结果是 有内容的
    //       if( 有内容 ) --->  if( true )
    //       就调用 window.getComputedStyle 这个方法

    //   使用if判断,始终只会有一种方法被调用执行,
    //   是支持的,有的方法,会被执行
    //   没有的方法,不会执行,就不会报错

    // 不支持的浏览器会报错,影响之后的程序的执行
    // var res = window.getComputedStyle(oDiv).fontSize ||  oDiv.currentStyle.fontSize;
    
    // 使用if方法,只有支持的才会执行,不支持的不会执行,不会有报错

    if(window.getComputedStyle){
        // 支持 window.getComputedStyle 的会执行这里的代码
        // 一般浏览器会执行这里的代码
        var res = window.getComputedStyle(oDiv).fontSize;
    }else{
        // 不支持 window.getComputedStyle 的会执行这里的代码
        // 低本IE浏览器,会执行这里的代码
        var res = oDiv.currentStyle.fontSize;
    }

    console.log(123);


    // 实际项目中,如何来执行兼容性的操作呢?
    // 记住一句话:不用管~~~~

    // 只有原生js 就是 最基础,最基本的js代码,才需要考虑兼容性
    // 最后的其他js方法,例如 jQuery 和 框架
    // 都会自动解决兼容问题,我们使用 jQuery和框架写项目时,都不用考虑兼容问题

    // 学习兼容性问题,是为了 面试 
    // 只需要把有可能遇到的兼容语法,背会就行了

</script>
DcTbnk.
发布了103 篇原创文章 · 获赞 4 · 访问量 2005
私信关注
JS18-DOM操作之标签的样式

猜你喜欢
