利用原生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技巧
这些代码片段主要由网友们平时分享的作品代码里面和经常去逛网站然后查看源文件收集到的.把平时网站上常用的一些实用功能代码片段通通收集起来,方便网友们学习使用,利用好的话可以加快网友们的开发速度,提高工作 ...
随机推荐
- 【mysql的编程专题】触发器
类似tp里面的数据模型回调接口,在数据表增删改的前或后触发执行其他的预订的sql; 一个触发器要具备4要素: 1.监视地点 -- 要执行触发器的表 2.监视事件 -- 由什么DML事件来牵引 3.触发 ...
- eclipse的设置和优化
转载:http://my.oschina.net/zhaoqian/blog/66545 1.eclipse下的编码设置: eclipse 中使用模板新建 JSP,xhtml等 文件时,默认的编码为: ...
- 检测系统是X86系统,还是X64系统
function IsWin64: Boolean; var Kernel32Handle: THandle; IsWow64Process: function(Handle: Windows.THa ...
- phpcms V9首页 频道页 列表页 推荐位 简单获取文章浏览量和评论统计
phpcms V9首页 频道页 列表页 推荐位 简单获取文章浏览量和评论统计 列表取得数据方法: {pc:content action="lists" catid="$c ...
- notepad++每行首尾添加内容
有时候我们需要给一个文本文件的每行前面或后面添加一些内容,例如我们一个文本文件里存放了很多图片的地址,现在我们需要把这些图片批量转换成html标记 百度经验:jingyan.baidu.com 工具/ ...
- Unity获取方法的参数和方法名称
public IMethodReturn Invoke(IMethodInvocation input, GetNextHandlerDelegate getNext) { Console.Write ...
- Django 大文件下载
django提供文件下载时,若果文件较小,解决办法是先将要传送的内容全生成在内存中,然后再一次性传入Response对象中: def simple_file_download(request): # ...
- List应用举例
1.集合的嵌套遍历 学生类: package listexercise; /** * Created by gao on 15-12-9. */ public class Student { priv ...
- oracle command - creata database dbca & create network netca Demo
#Creata database command: dbca [root@redhat4 ~]# su - oracle[oracle@redhat4 ~]$ dbca # ...
- WEBBROWSER中模拟鼠标点击(SendMessage/PostMessage)
好久没有写文章,发一篇顶顶博客访问量.别人建议转一些比较好的代码也贴过来,但是我打算这里主要发自己原创的代码,所以么..流量该多少就多少吧... 回到主题,在webbrowser中点击某链接网上几乎都 ...