利用原生JavaScript获取样式的方式小结
来源:http://www.ido321.com/930.html
ps:是获取样式,不是设置样式。若没有给元素设置样式值,则返回浏览器给予的默认值。(论坛整理)
1、element.style:只能获取写在元素标签中的style属性里的样式值,无法获取到定义在<style></style>和通过<link href=”css.css”>加载进来的样式属性
1: var ele = document.getElementById('ele');
2: ele.style.color; //获取颜色
2、window.getComputedStyle():可以获取当前元素所有最终使用的CSS属性值。
1: window.getComputedStyle("元素", "伪类");
这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例如“:before”) 。如果不需要伪元素信息,第二个参数可以是null。也可以通过document.defaultView.getComputedStyle(“元素”, “伪类”);来使用
1: var ele = document.getElementById('ele');
2: var styles = window.getComputedStyle(ele,null);
3: styles.color; //获取颜色
可以通过style.length来查看浏览器默认样式的个数。IE6-8不支持该方法,需要使用后面的方法。对于Firefox和Safari,会把颜色转换成rgb格式。
3、element.currentStyle:IE 专用,返回的是元素当前应用的最终CSS属性值(包括外链CSS文件,页面中嵌入的<style>属性等)。
1: var ele = document.getElementById('ele');
2: var styles = ele.currentStyle;
3: styles.color;
注意:对于综合属性border等,ie返回undefined,其他浏览器有的返回值,有的不返回,但是borderLeftWidth这样的属性是返回值的
4、getPropertyValue():获取CSS样式的直接属性名称
1: var ele = document.getElementById('ele');
2: window.getComputedStyle(ele,null).getPropertyValue('color');
注意:属性名不支持驼峰格式,IE6-8不支持该方法,需要使用下面的方法
5、getAttribute():与getPropertyValue类似,有一点的差异是属性名驼峰格式
1: var test = document.getElementById('test');
2: window.getComputedStyle(test, null).getPropertyValue("backgroundColor");
注意:该方法只支持IE6-8。
下面的获取样式方法兼容IE、chrome、FireFox等
1: function getStyle(ele) {
2: var style = null;
3:
4: if(window.getComputedStyle) {
5: style = window.getComputedStyle(ele, null);
6: }else{
7: style = ele.currentStyle;
8: }
9:
10: return style;
11: }
在JQuery中,常用css()获取样式属性,其底层运作就应用了getComputedStyle以及getPropertyValue方法。
利用原生JavaScript获取样式的方式小结的更多相关文章
- 原生JavaScript支持6种方式获取元素
一.原生JavaScript支持6种方式获取元素 document.getElementById('id'); document.getElementsByName('name'); document ...
- 原生js获取样式
js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = e ...
- JavaScript获取样式值的几种方法学习总结
本人经过整理总结出以下获取样式值的方法,如有错误请各位大佬指正. 有四种方法:style,currentStyle,getComputedStyle,rules 与 cssRules方法. 1. st ...
- 使用JavaScript获取样式的属性值
1 . 在js中可以使用style属性来获取样式的属性值(只能获取内联样式的属性值) 语法格式为: HTML元素.style.样式属性; 2 . 在IE浏览器中,使用currentStyle来获取 ...
- 原生JavaScript获取css样式
访问属性:obj.attr 或者 obj['attr'] 通过js访问style属性 : document.getElementById("main").style.backgro ...
- 原生JavaScript 获取下一个/上一个同胞元素
看JavaScript遇到的问题,研究了下 获取上一个或者下一个同胞元素,使用很多人会立马想到JQuery prev() 和 next() 的确非常方便.那么原生的JavaScript该怎么获取 上 ...
- 利用原生Javascript实现计算器(未完待续)
这里,将记录我升级四则运算v1.2的整个过程. 环境检测,杨说检测环境也是可以高兴到手舞足蹈的一件事. 为了实现自动化,Testing,查阅相关资料,我这里使用了node(这里为了npm).yoema ...
- 原生javascript封装动画库
****转载自自己发表于牛人部落专栏的文章**** 一.前言 本文记录了自己利用原生javascript构建自己的动画库的过程,在不断改进的过程中,实现以下动画效果: 针对同一个dom元素上相继发生的 ...
- 10个原生JavaScript技巧
这些代码片段主要由网友们平时分享的作品代码里面和经常去逛网站然后查看源文件收集到的.把平时网站上常用的一些实用功能代码片段通通收集起来,方便网友们学习使用,利用好的话可以加快网友们的开发速度,提高工作 ...
随机推荐
- eclipse中(装了插件m2eclipse后的)导入maven工程显示"感叹号"
有时候导入一些开源工程(maven结构的),在eclipse中(装了插件m2eclipse后的)该工程前面会有一个小的红色感叹号,但点开工程后没有发现有打小红叉的内容,这种情况其实大部分是jar包 ...
- Simple Factory 简单工厂模式(静态工厂)
基本概念: 1) Simple Factory模式属于创建型模式, 2) 简单工厂模式是由一个工厂(注意是一个!)对象决定创建出哪一种产品类的实例(例如你到肯德基说你要鸡腿,要薯条,要饮料还是,,,这 ...
- 发送消息执行记事本的“另存为”菜单功能(通过WM_COMMAND控制使用别的程序的菜单命令)
发送消息执行记事本的“另存为”菜单功能procedure TForm1.FormCreate(Sender: TObject);var hNotepad: Cardinal;begin hNotepa ...
- C#基础精华----枚举
enums枚举是值类型,数据直接存储在栈中,而不是使用引用和真实数据的隔离方式来存储. (1)默认情况下,枚举中的第一个变量被赋值为0,其他的变量的值按定义的顺序来递增(0,12,3...),因此以下 ...
- NSPoint
#import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasep ...
- 如何禁用 radio ,设置为只读,不能选定
如何禁用 radio ,设置为只读,不能选定 禁用 radio ,设置为只读,不能选定: <input name="gender" type="radio" ...
- Java API —— JDK5新特性
JDK5新特性 自动拆装箱.泛型.增强for.静态导入.可变参数.枚举 1.增强for概述 1)简化数组和Collection集合的遍历 2)格式: ...
- socklen_t在windows和linux平台下的头文件定义
windows平台下:头文件:#include<ws2tcpip.h> linux平台下:下面两个头文件都有定义:1)#include <sys/socket.h>2)#inc ...
- UVa 11922 - Permutation Transformer 伸展树
第一棵伸展树,各种调试模板……TVT 对于 1 n 这种查询我处理的不太好,之前序列前后没有添加冗余节点,一直Runtime Error. 后来加上冗余节点之后又出了别的状况,因为多了 0 和 n+1 ...
- mac下装Ruby
https://ruby-china.org/wiki/install_ruby_guide