大家都知道在 JavaScript 原生操作中获取元素的样式,在实际操作是使用时比较频繁的一件事,这里像大家介绍下获取 CSS 样式的方法,希望可以帮助一些需要的人,如果有幸被大牛看到,有更好的办法,欢迎提出!!!
一、 行内元素样式获取:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- js获取外部样式
- </title>
- </head>
- <body>
- <div id="div" style="width:200px;height:200px;border:3px solid cyan;">
- </div>
- </body>
- <script>
- //获取行间样式
- var div = document.getElementById('div');
- var width = div.style.width;
- alert(width); //200px
- </script>
- </html>
在 JS 代码中,alert 会弹出 div 元素的 width 为 200px;达到了要获取元素宽度的目的,但是这种简单的方法只适用于获取元素的行内元素样式,并不能获取内部样式和外部样式,在项目中,写入行内元素这种方案并不被大家认同,所以这种方法,只是让大家了解下。
二、 非行间样式元素获取:
如果元素样式并非行间样式,利用上面这种方法并不能获取到元素的样式,需要使用另一种方法:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- js获取内部部样式
- </title>
- <style>
- #div{ width: 200px; height: 200px; border:3px solid cyan; }
- </style>
- </head>
- <body>
- <div id="div"
- "></div>
- </body>
- <script>
- var div = document.getElementById('div');
- //获取div的width
- var width = window.getComputedStyle(div,null).width;
- alert(width);//200px
- //修改div的width
- div.style.cssText='width:300px;'
- </script>
- </html>
在上面代码中,使用了 window.getComputedStyle('元素',null).'样式', 此方法兼容性: 火狐 谷歌 IE9
三 、兼容性:
前段潜规则, 凡是好的东西都不能通用, 是的, 你猜对了, 任性的 IE 并不能使用以上方法, 但是 IE 有自己的方法为 currentStyle, 用法一样, 就不再赘述了, 下面直接写出已经处理兼容的代码如下:
- var div = document.getElementById('div');
- if (div.currentStyle) {
- console.log(div.currentStyle.width);
- }else{
- console.log(getComputedStyle(div,null).width);
- }
方法封装:
- function getStyle(obj,name){
- if (obj.currentStyle) {
- return obj.currentStyle[name];
- }else{
- return getComputedStyle(obj,false)[name];
- }
- }
来源: