一、 js 常用访问CSS 属性的方法
我们访问得到css 属性,比较常用的有两种:
1. 利用点语法
box.style.width box.style.top
点语法可以得到 width 属性 和 top属性 带有单位的。 100px
但是这个语法有非常大的缺陷, 不变的。
后面的width 和 top 没有办法传递参数的。
var w = width;
box.style.w
2. 利用 [] 访问属性
语法格式: box.style[“width”]
元素.style[“属性”];
console.log(box.style["left"]);
最大的优点 : 可以给属性传递参数
二、 得到css 样式
我们想要获得css 的样式, box.style.left box.style.backgorundColor
但是它只能得到 行内的样式。
但是我们工作最多用的是 内嵌式 或者 外链式 。
怎么办?
核心: 我们怎么才能得到内嵌或者外链的样式呢?
1、 obj.currentStyle ie opera 常用
外部(使用<link>)和内嵌(使用<style>)样式表中的样式(ie和opera)
2、window.getComputedStyle("元素", "伪类") w3c
两个选项是必须的, 没有伪类 用 null 替代
3 、兼容写法 :
我们这个元素里面的属性很多, left top width ===
我们想要某个属性, 就应该 返回改属性,所有继续封装 返回当前样式的 函数。
1 1 var demo = document.getElementById("demo"); 2 2 function getStyle(obj,attr) { // 谁的 那个属性 3 3 if(obj.currentStyle) // ie 等 4 4 { 5 5 return obj.currentStyle[attr]; 6 6 } 7 7 else 8 8 { 9 9 return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器 10 10 } 11 11 } 12 12 console.log(getStyle(demo,"width"));