javascript getComputedStyle,getPropertyValue,CurrentStyle说明
Dom中的getPropertyValue方法可以用来获取元素中指定的css属性值.该方法支持W3C标准.与IE中的currentStyle方法作用相同.都是根据指定的css属性名称来获取属性值.比如要获取某div的宽度是多少,文字排放text-align是怎么对齐的,以及position如何定位的.
他们的区别是:
1:getPropertyValue必须配合getComputedStyle方法一起使用.
2:getPropertyValue支持W3C标准.但不支持IE浏览器,
3:currentStyle非W3C标准.只支持IE.不能在FF等浏览器下使用.
如果想在多浏览器里实现这种效果,必须根据判断浏览器来配合使用.我在下面会给出一个兼容IE和FF等浏览器获取元素css属性值的例子.
css_value:返回对某个css属性值的引用.如:text-align值,position值等.
window.getComputedStyle:直接使用window对象调用getComputedStyle方法来获取所有可用的css属性.
css_name:要获取的css属性值的名称.比如:text-align,position,background等等.
getPropertyValue实例
<html>
<head>
<title>Dom:currentStyle使用实例</title>
<style>
#a{
border:1px solid;
width:200px;
height:100px;
text-align:center;
position:absolute;
}
</style>
</head>
<body>
<div id="a"></div>
<script language="javascript">
var a = document.getElementById("a")//获取元素
if(document.all){//IE浏览器
var wh = a.currentStyle["width"];
var text_align = a.currentStyle["textAlign"];
var posi = a.currentStyle["position"];
}
else{//FF或其他浏览器
var wh = window.getComputedStyle(a,null).width;
var text_align = "textAlign"; //凡是带横杠(-)的属性,在FF浏览器里必须转换一下属性名称
text_align = text_align.replace(/([A-Z])/g,"-$1");//使用正则转换
text_align.toLowerCase();
text_align = window.getComputedStyle(a,null).getPropertyValue(text_align);
var posi = window.getComputedStyle(a,null).getPropertyValue("position");
}
alert("宽度值是:" + wh);
alert("文本排放是:" + text_align);
alert("position值是:" + posi);
</script>
</body>
</html>
经测试getPropertyValue至少兼容以下浏览器:Firefox
W3C标准:是
getComputedStyle说明:
Dom中getComputedStyle方法可用来获取元素中所有可用的css属性列表.以数组形式返回.注意啊getComputedStyle不会直接返回元素中某个css样式的属性值.他返回的是一个数组.这个数组中包括所有可用的css属性.例如:float,positin,border,background等等.
通常这个方法必须配合getPropertyValue属性使用,才可以获取指定的css属性值,如只想获取width的值或text-align以及left的值.就必须使用getPropertyValue属性.为了方便理解.我在下面例子中只演示getComputedStyle方法的作用.
该方法不支持IE浏览器,请使用FF和其他支持Dom标准的浏览器查看.
如果想了解获取某个属性的值,请点击:currentStyle或getPropertyValue
arr_style:以数组的形式.返回所有的css可用属性.
window:直接调用window对象访问getComputedStyle方法.
elem_id:元素的id,要获取该元素的css样式
ov:伪元素,是否要获取伪元素属性值.如hover,active,link等属性.如果不想获取这些伪元素的属性值请填写为null.
getComputedStyle实例
<html>
<head>
<title>Dom:getComputedStyle使用实例</title>
</head>
<body>
<h2>第一次会弹出获取的css属性数组的长度,然后依次弹出可用属性,大家会发现background-attachment,background-color,background-image
看完例子你应该会明白getComputedStyle具体作用了,如果想获取某个属性的值.请配合使用getPropertyValue
<div id="a"></div>
<script language="javascript">
var a = document.getElementById("a")//获取元素
var arr_style = window.getComputedStyle(a,null);
alert(arr_style.length);//数组的长度.包含所有css可用属性
alert(arr_style[0]);//我们来看看数组第一个css属性是什么
alert(arr_style[1]);//再来看第二个
alert(arr_style[2]);//再来第三个
</script>
</body>
</html>
Dom中的currentStyle属性.从字面上理解这是当前样式风格.没错currentStyle就是用来获取元素内Css的style样式属性值.比如说元素的width值height值.甚至元素的文本排放方式text-align,包括position等等.所有的css属性值都可以被获取.但是currentStyle仅支持IE浏览器,如若想在FF或基于Dom标准的其他浏览器内实现相同效果.请使用getComputedStyle属性.我在下面给出一个例子,来获取div的宽度值,文本如何排放.和绝对定位的值.已支持IE和FF其他浏览器.放心浏览!
o:返回元素某个样式属性值的引用.
elem:要在该元素内获取样式属性.
style_name:样式属性名称.如:width,height,text-align
currentStyle实例
<head>
<title>Dom:currentStyle使用实例</title>
<style>
#a{
border:1px solid;
width:200px;
height:100px;
text-align:center;
position:absolute;
}
</style>
</head>
<body>
<div id="a"></div>
<script language="javascript">
var a = document.getElementById("a")//获取元素
if(document.all){//IE浏览器
var wh = a.currentStyle["width"];
var text_align = a.currentStyle["textAlign"];
var posi = a.currentStyle["position"];
}
else{//FF或其他浏览器
var wh = window.getComputedStyle(a,null).width;
var text_align = "textAlign"; //凡是带横杠(-)的属性,在FF浏览器里必须转换一下属性名称
text_align = text_align.replace(/([A-Z])/g,"-$1");//
text_align.toLowerCase();
text_align = window.getComputedStyle(a,null).getPropertyValue(text_align);
var posi = window.getComputedStyle(a,null).getPropertyValue("position");
}
alert("宽度值是:" + wh);
alert("文本排放是:" + text_align);
alert("position值是:" + posi);
</script>
</body>
转载于:https://www.cnblogs.com/wangluochong/archive/2012/02/23/2364479.html
javascript getComputedStyle,getPropertyValue,CurrentStyle说明相关推荐
- js获取css值的方法:style、getComputedStyle和currentStyle
JS 获取 html元素的样式有三种方式:style.getComputedStyle 和 currentStyle等.区别在于: (1)style 只能获取行间样式,但能设置样式. (2)getCo ...
- getComputedStyle和currentStyle的区别和用法
获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...
- getComputedStyle、currentStyle的区别与用法
获取元素CSS值之getComputedStyle方法熟悉 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinx ...
- getComputedStyle和currentStyle的使用方法
getComputedStyle和currentStyle的使用方法 getComputedStyle可获取当前元素的所有css属性,返回的是一个[object CSSStyleDeclaration ...
- javascript中style与getComputedStyle()与currentStyle()的异同。
首先讨论这个问题我们先来看看样式的三种形式:内联样式,内部样式,外部样式 三种样式的优先级:内联样式>内部样式>外部样式 外部样式就是我们通过link标签将外部样式表引入的样式,而,而我们 ...
- getComputedStyle与currentStyle获取样式(style/class)
大家都知道,用document.getElementById('element').style.xxx可以获取元素的样式信息,可是它获取的只是DOM元素style属性里的样式规则,对于通过class属 ...
- JS getComputedStyle() 与 currentStyle
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属 ...
- getComputedStyle与currentStyle
本文参考https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle 1.简介 getComputedStyle是w ...
- CSSOM之getComputedStyle,currentStyle,getPropertyValue,getAttribute
js关于CSSOM编程的样式相关几个常用的方法 webkit:getComputedStyle,getPropertyValue IE:currentStyle,getAttribute 前言 jqu ...
- JavaScript window.getComputedStyle()
一.window.getComputedStyle() getComputedStyle 是一个可以获取当前元素所有最终使用的 CSS 属性值.返回的是一个 CSS 样式声明对象 ([object C ...
最新文章
- java a =a-=aa_Java求s=a+aa+aaa+aaaa+aa...a的值
- P2486 [SDOI2011]染色(树链剖分+线段树)
- webpack vue router import() 打包后单个js文件名称自定义
- Asp.net 表单打印时的样式设置【原】
- 新书榜TOP 20占了17位!榜单里有哪些值得入手的技术新书?
- 计算机上安装的游戏怎么删除,win7自带游戏安装包太占内存怎么删除?
- 【GPS】 根据GPS坐标求取两点间距离算法
- STM8S003F3使用总结——定时器
- 计算机 去掉快捷方式箭头,桌面快捷键小箭头怎么去掉【图文介绍】
- 再轰冯导,和科研人员比你只是个奢靡的戏子
- python一键合并excel表格
- 兔子繁殖为例 c语言,用斐波那契数列解答兔子的繁殖
- docker logs-查看docker容器日志
- html 不自动缩放,html 禁止缩放
- ubuntu安装nginx安装依赖报错Unable to locate package zlib
- 飞信消息通道服务器,和飞信_服务中心_中国移动通信
- Linux命令之压缩zip
- Cesium隐藏地球底图
- 华为手机Android系统优缺点,华为手机与iPhone相比有哪些优缺点?
- 考取PMP证书后,如何进一步提升自己?
热门文章
- Modelsim调用用do脚本自动化仿真
- 马哥学习笔记十八——MySQL进阶之日志管理
- javascript面向对象技术基础
- 手机号码归属地查询练习
- Spring入门看这一篇就够了
- 为你的简书和 GitHub 设定个性域名
- XenServer部署系列之05——虚拟机的创建及复制
- 一致性Hash与负载均衡
- 封装常用的js(base.js)——【05】自定义弹出框.封装水平垂直居中center(),和resize() ....
- window.postMessage