第60天:js常用访问CSS属性的方法

时间:2023-03-09 08:59:46
第60天:js常用访问CSS属性的方法

一、 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    var demo = document.getElementById("demo");
2 function getStyle(obj,attr) { // 谁的 那个属性
3 if(obj.currentStyle) // ie 等
4 {
5 return obj.currentStyle[attr];
6 }
7 else
8 {
9 return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器
10 }
11 }
12 console.log(getStyle(demo,"width"));