<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>
JS18-DOM操作之标签的样式
最新推荐文章于 2024-09-22 14:50:37 发布