利用原生JavaScript获取元素样式只是获取而已


Posted in Javascript onOctober 08, 2014

ps:是获取样式,不是设置样式。若没有给元素设置样式值,则返回浏览器给予的默认值。(论坛整理)

1、element.style:只能获取写在元素标签中的style属性里的样式值,无法获取到定义在<style></style>和通过<link href=”css.css”>加载进来的样式属性

var ele = document.getElementById('ele');

ele.style.color; //获取颜色

2、window.getComputedStyle():可以获取当前元素所有最终使用的CSS属性值。
window.getComputedStyle("元素", "伪类");

这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例如“:before”) 。如果不需要伪元素信息,第二个参数可以是null。也可以通过document.defaultView.getComputedStyle(“元素”, “伪类”);来使用
var ele = document.getElementById('ele');

var styles = window.getComputedStyle(ele,null);

styles.color; //获取颜色

可以通过style.length来查看浏览器默认样式的个数。IE6-8不支持该方法,需要使用后面的方法。对于Firefox和Safari,会把颜色转换成rgb格式。

3、element.currentStyle:IE 专用,返回的是元素当前应用的最终CSS属性值(包括外链CSS文件,页面中嵌入的<style>属性等)。

var ele = document.getElementById('ele');

var styles = ele.currentStyle;

styles.color;

注意:对于综合属性border等,ie返回undefined,其他浏览器有的返回值,有的不返回,但是borderLeftWidth这样的属性是返回值的

4、getPropertyValue():获取CSS样式的直接属性名称

var ele = document.getElementById('ele');

window.getComputedStyle(ele,null).getPropertyValue('color');

注意:属性名不支持驼峰格式,IE6-8不支持该方法,需要使用下面的方法

5、getAttribute():与getPropertyValue类似,有一点的差异是属性名驼峰格式

var test = document.getElementById('test');

window.getComputedStyle(test, null).getPropertyValue("backgroundColor");

注意:该方法只支持IE6-8。

下面的获取样式方法兼容IE、chrome、FireFox等

function getStyle(ele) {
var style = null;

if(window.getComputedStyle) {

style = window.getComputedStyle(ele, null);

}else{

style = ele.currentStyle;

}

return style;

}

在JQuery中,常用css()获取样式属性,其底层运作就应用了getComputedStyle以及getPropertyValue方法。
Javascript 相关文章推荐
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
Vant picker 多级联动操作
Nov 02 Javascript
javascript学习笔记(八)正则表达式
Oct 08 #Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 #Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 #Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 #Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 #Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 #Javascript
JavaScript中获取样式的原生方法小结
Oct 08 #Javascript
You might like
单位速度在实战中的运用
2020/03/04 星际争霸
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
python多重继承新算法C3介绍
2014/09/28 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
python实现LRU热点缓存及原理
2019/10/29 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
Python实现爬取并分析电商评论
2020/06/19 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
Python如何读取、写入CSV数据
2020/07/28 Python
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
机电一体化大学生求职信
2013/11/08 职场文书
酒店个人培训自我鉴定
2013/12/11 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
小学生环保倡议书
2014/05/15 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
2014小学年度工作总结
2014/12/20 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
vue+spring boot实现校验码功能
2021/05/27 Vue.js