原生js获取元素的样式style属性值

事情是这样的,我今天在帮一个朋友实现原生手写轮播图,然后我发现自己在获取一个元素的样式上出现了一点点小问题,就顺带去谷歌了一番了。

原生js获取CSS样式.png
一 原本的我🤦
问题:

是这样的,一开始需要获取某一个元素的left值,我就用ele.style.left去获取了(基础不扎实还好意思来丢人),然后居然返回的是空。
好吧,追本溯源,问题的根源以及区别就在这里了。

ele.style 的使用

  • 只读内联样式属性:使用该方法获取的样式值,是元素内联的样式上才有的。举个例子,如果你有一个元素<div style='color:red,left:40px'></div>,那么你获取这个元素的样式,ele.style.color 就会返回left,如果使用ele.style.left就会返回40px;
    一个温馨提示:如果真的是使用这种方式去获取属性值,那么需要转换成整数而且去掉单位,那么就可以用parseInt(40px),就会返回40
  • 可读可写:该方法可以同时设置或者获取某一个元素的样式 (记住,只能读取定义的style样式里的属性。)

所以,我那样是获取不到某一个元素的一个其他方式设置的样式属性值的,所以我就打算谷歌一下别的方法了。

window.getComputedStyle() 与getPropertyValue

image.png

嗯,很不错,这个方法可以获取一个元素的所有来自四面八方设置的样式属性,本身的属性都可以被我们读取到。
💁 那么,问题来了,如果要读取其中的一个值,我们应该怎么做呢?

getPropertyValue

// 基本语法
getComputedStyle(document.getElementById('caseroul'),null).getPropertyValue(‘left’)

特点:
- 只可读,但是可以读取所有的样式属性值。但是不能通过该方法去设置样式属性值。

css中设置样式属性的一些方法:

elt.style.cssText = "color: blue"; // 设置多个样式属性 
elt.setAttribute("style", "color: blue"); // 设置多个样式属性 
elt.style.color = "blue"; // 直接设置样式属性
var st = elt.style; st.color = "blue"; // 间接设置样式属性

2 IE下的currentStyle 与 getAttribute

currentStyle获取的是一个元素的所有的样式属性值,这一点功能是与getComputedStyle()一样的,但是在获取某一个具体的属性的时候,可以结合getAttribute来实现。
和 getComputedStyle 方法不同的是,currentStyle 要获得属性名的话必须采用驼峰式的写法。也就是如果我需要获取 font-size 属性,那么传入的参数应该是 fontSize。因此在IE 中要获得单个属性的值,就必须将属性名转为驼峰形式。(感谢这篇文章。)

// IE 下语法:
// IE 下将 CSS 命名转换为驼峰表示法
// font-size --> fontSize
// 利用正则处理一下就可以了
function camelize(attr) {
    // /\-(\w)/g 正则内的 (\w) 是一个捕获,捕获的内容对应后面 function 的 letter
    // 意思是将 匹配到的 -x 结构的 x 转换为大写的 X (x 这里代表任意字母)
    return attr.replace(/\-(\w)/g, function(all, letter) {
        return letter.toUpperCase();
    });
}
// 使用 currentStyle.getAttribute 获取元素 element 的 style 属性样式
element.currentStyle.getAttribute(camelize(style));
关于返回值

关于getComputedStyle返回的值,具体查看这里。
不管你最初定义的样式是什么,涉及到宽度高度之类的,返回的都是最后实际使用的宽度和高度。

image.png

image.png

关于ele.style的返回值,是和定义的样式的值相等的,如果设置为auto,就直接返回auto。

const test = document.querySelector('.test');
console.log(test.offsetWidth, '获取offsetWidth的宽度');    // 204,包括边框的宽度
console.log(getComputedStyle(test, null).getPropertyValue('width'));   // 200px,实际的样式宽度
console.log(test.getBoundingClientRect().right - test.getBoundingClientRect().left)   // 200
console.log(test.style.width);  //无返回值。

然后是元素的高宽,对于一个没有设定高宽的元素而言,在 IE678 下使用 getPropertyValue("width|height") 得到的是 auto 。而标准浏览器会直接返回它的 px 值,当然我们希望在 IE 下也返回 px 值。

这里的 HACK 方法是使用 element.getBoundingClientRect() 方法。

element.getBoundingClientRect() -- 可以获得元素四个点相对于文档视图左上角的值 top、left、bottom、right ,通过计算就可以容易地获得准确的元素大小。

参考链接 chokcoco的博客园

推荐阅读更多精彩内容

  • 我们首先要明白,我们给页面添加效果用到的js到底是什么?js其实包含三部分:dom 文档对象模型 bom 浏览...
    一直以来都很好阅读 472评论 0 0
  • DOM总结 1:DOM - document object model 文档对象模型 作用:给我们提供了一些方法...
    盒小饭stone阅读 246评论 0 0
  • 在云笔记中发现了很久以前写的总结,看着总结还能想到当初认认真真一个一个浏览器测试的样子。 【目录】 1 jQuer...
    辣瓜瓜阅读 326评论 0 0
  • 首发:陆否(lofter) 今天开门的时候被门把手上带的静电打得手都缩了回去,然后突然有了一个脑洞…… 一篇关于千...
    欺杏阅读 207评论 0 2
  • 杜小萤阅读 79评论 2 3
  • 地老天荒输给岁月 似水年华绕不开生老病死 富贵名利终是虚 光阴有限勿念太多 世态炎凉需从容相待 仙佛尚有灾劫烦难 ...
    楼满风_c524阅读 76评论 0 3