JS获取元素CSS值
一、getComputedStyle
getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),只读。
语法如下:
var style = window.getComputedStyle("元素", "伪类");
//例
var dom = document.getElementById("test");
var style = window.getComputedStyle(dom , ":after"); //获取属性可以用 getPropertyValue (不驼峰 IE9+),getAttribute(驼峰) style.getAttribute("backgroundColor");
style.getPropertyValue("border-top-left-radius");
Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null
);
getComputedStyle IE6~8是不支持的。
IE可以用CurrentStyle,它是IE浏览器自娱自乐的一个属性
例如,我们要获取一个元素的高度,可以类似下面的代码:
alert((element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).height);
二、style
element.style 可读可写。
getComputedStyle
方法获取的是最终应用在元素上的所有CSS属性对象(包括默认),而element.style
只能获取元素style
属性中的CSS样式。
三、getBoundingClientRect()
var box=document.getElementById('box'); // 获取元素 alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离
IE8一下只有上下左右可获取到,默认坐标从(2,2)开始计算,
var right = box.getBoundingClientRect().right;
var left = box.getBoundingClientRect().left; var width = right-left;
JS获取元素CSS值的更多相关文章
- JS获取元素CSS值的各种方法分析
先来看一个实例:如何获取一个没有设置大小的字体? <!DOCTYPE html> <html lang="en"> <head> <met ...
- 转贴:获取元素CSS值之getComputedStyle方法熟悉
获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...
- Js获取元素样式值(getComputedStyle¤tStyle)兼容性解决方案
因为:style(document.getElementById(id).style.XXX)只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. 一般js获取内部样式和外部样式使用 ...
- 获取元素CSS值之getComputedStyle方法熟悉
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2378 一.碎碎念~前 ...
- js获取元素属性值为空的原因和解决办法
问题描述:js获取某元素的属性值为空 代码: <!-- css定义在head中 --> <style> #box{ width: 100px; height: 100px; b ...
- getComputedStyle方法获取元素CSS值
javascript的style属性只能获取内联样式,对于外部样式和嵌入式样式需要用currentStyle属性.但是,currentStyle在FIrefox和Chrome下不支持,需要用getCo ...
- 利用getComputedStyle方法获取元素css的属性值
在平时的工作中有时候会碰到需要获取元素当前样式的问题,查了一下可以用getComputedStyle这个方法来获取元素计算后的样式(有些我们在css里面没有写的,浏览器默认的样式也可以获得) getC ...
- js获取元素transform参数得出的个人理解
之前写页面的时候有试过想用js获取某些元素的translate的数值什么的,但是translate又是transform的子样式(勉强说说),理所当然就是先获取transform样式,再读里面的值. ...
- (转载)记录函数 getStyle() 获取元素 CSS 样式
设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...
随机推荐
- [LeetCode] First Bad Version 第一个坏版本
You are a product manager and currently leading a team to develop a new product. Unfortunately, the ...
- [LeetCode] Substring with Concatenation of All Words 串联所有单词的子串
You are given a string, s, and a list of words, words, that are all of the same length. Find all sta ...
- .NET跨平台之旅:探秘 dotnet run 如何运行 .NET Core 应用程序
自从用 dotnet run 成功运行第一个 "Hello world" .NET Core 应用程序后,一直有个好奇心:dotnet run 究竟是如何运行一个 .NET Cor ...
- Ubuntu下基于Saprk安装Zeppelin
前言 Apache Zeppelin是一款基于web的notebook(类似于ipython的notebook),支持交互式地数据分析,即一个Web笔记形式的交互式数据查询分析工具,可以在线用scal ...
- python基础-软件目录结构规范
一.定义目录结构目的 可读性高: 不熟悉这个项目的代码的人,一眼就能看懂目录结构,知道程序启动脚本是哪个,测试目录在哪儿,配置文件在哪儿等等.从而非常快速的了解这个项目. 可维护性高: 定义好组织规则 ...
- Spring缓存机制的理解
在spring缓存机制中,包括了两个方面的缓存操作:1.缓存某个方法返回的结果:2.在某个方法执行前或后清空缓存. 下面写两个类来模拟Spring的缓存机制: package com.sin90lzc ...
- 滚来滚去,滚来滚去...Scroller完全解析
API: 1 mScroller.getCurrX() //获取mScroller当前水平滚动的位置 2 mScroller.getCurrY() //获取mScroller当前竖直滚动的位置 3 m ...
- C#基础练习
1.冒泡排序 namespace _0 { class Program { public static int[] BubbleSort(int[] arr) { ; i < arr.Lengt ...
- 【Beta】Scrum09
Info 考试周,暂停工作 时间:2016.12.26 21:35 时长:20min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:2016.12.31 21:30 Task Rep ...
- 逆向工程学习第一天--一个VC6编译的小程序
今天开始研究二进制了,开个文记录一下.下面是一个小程序的OD反汇编代码,自己尝试加了注释,本人逆向零基础,属于摸着石头过河的类型,有理解错误的地方,希望大牛不吝赐教. 源代码: #include< ...