javascript getComputedStyle,getPropertyValue,CurrentStyle说明

最新推荐文章于 2022-03-24 18:18:12 发布
最新推荐文章于 2022-03-24 18:18:12 发布
阅读量3.3k 收藏 1
点赞数
分类专栏： 技术 文章标签： javascript 浏览器 css null border ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/czl_danny/article/details/7101790
版权
 

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=window.getComputedStyle.getPropertyValue(css_name)
返回值：

css_value:返回对某个css属性值的引用．如:text-align值，position值等．

参数

window.getComputedStyle:直接使用window对象调用getComputedStyle方法来获取所有可用的css属性．
css_name:要获取的css属性值的名称．比如:text-align,position,background等等．

<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标准：是

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=window.getComputedStyle(elem_id,ov);
返回值：

arr_style:以数组的形式．返回所有的css可用属性．

参数

window:直接调用window对象访问getComputedStyle方法．
elem_id:元素的id,要获取该元素的css样式
ov:伪元素，是否要获取伪元素属性值．如hover,active,link等属性．如果不想获取这些伪元素的属性值请填写为null.

<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.currentStyle[style_name];
返回值：

o:返回元素某个样式属性值的引用．

参数

elem:要在该元素内获取样式属性．
style_name:样式属性名称．如：width,height,text-align

<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>
czl_danny
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
原生javascript获取元素样式
chenpeng19910926的专栏
03-08 738
摘要：     我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式，方法有很多，比如：通过更改DOM元素的class。现在我们讨论原生js来获取DOM元素的CSS样式，注意是获取不是设置     在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是，如果没有给元素设置任何样式，也会把浏览器默认的样式返回来。 1、ele.style     在学习DOM的时候就看到通
getPropertyValue （实现 js框架中 css 的最终调用的函数）
03-24 453
，取得元素最终计算出的css 样式 var a = document.getElementById("content"); alert("style "+a.style.color); alert("css "+window.getComputedStyle(a).getPropertyValue("color")); 转载于:https://www.cnblog...
getPropertyValue
06-15 4086
DEMO： content 如果我们不使用getPropertyValue方法，直接使用键值访问，其实也是可以的。但是，比如这里的的float，如果使用键值访问，则不能直接使用getComputedStyle(element, null).float，而应该是cssFloat与styleFloat，自然需要浏览器判断了，比较折腾！ 使用getPropertyValue方法不必
通过getPropertyValue 取得最终的CSS样式
ISaiSai的专栏
12-14 3849
新学习一个js 的方法 getPropertyValue   （实现 js框架中  css 的最终调用的函数），取得元素最终计算出的css 样式 DEMO：                     #content {             color: red !important;;         }     content
getPropertyValue 获取CSS样式
u011927449的博客
06-16 679
新学习一个js 的方法getPropertyValue （实现 js框架中 css 的最终调用的函数），取得元素最终计算出的css 样式 DEMO： <!DOCTYPE html> <html><head> <title></title> <meta charset="gbk"> <style type="text/css"> #content { col...
JSP七动作---＜jsp:getProperty＞
m0_59237608的博客
03-24 2230
<jsp:getProperty>动作用于读取JavaBean对象的属性值。此动作标签底层是调用JavaBean对象的getter方法获取属性值，然后将读取的属性值转换为字符串，插入输出的响应正文中并显示到页面上，所以，JavaBean类当中必须提供公开的getter方法。
JS中的getComputedStyle1
08-08
- 在IE8及以下版本，`getComputedStyle`被替换为`currentStyle`对象，使用方式略有不同。 - 对于跨框架（iframe）的元素，需要确保`getComputedStyle`调用在与目标元素相同的窗口或框架上下文中。 总之，`...
getComputedStyle_tyle.rar_getComputedSty_getcomputedstyle
09-22
例如，IE8及以下版本使用`currentStyle`代替`getComputedStyle`，所以在编写跨浏览器的代码时，需要考虑到这一点。 总之，`getComputedStyle`是JavaScript中处理样式信息的重要工具，它可以帮助开发者获取元素在...
详解Javascript动态操作CSS
10-25
而在Firefox和其他遵循W3C标准的浏览器中，我们需要使用`window.getComputedStyle(obj, null).getPropertyValue("属性名")`，例如`window.getComputedStyle(obj, null).getPropertyValue("width")`。 接下来，我们...
JavaScript中获取样式的原生方法小结
10-25
在jQuery库中，`css()`函数用于获取或设置样式，其内部实际上使用了`getComputedStyle`和`getPropertyValue`等原生方法来实现。 总结来说，JavaScript获取样式的原生方法各有特点，需要根据浏览器兼容性和具体需求...
JavaScript如何获取一个元素的样式信息
10-16
总之，获取元素的样式信息是JavaScript开发中常见的需求，通过`currentStyle`和`getComputedStyle()`这两个方法，我们可以兼容大多数浏览器，实现跨浏览器的样式获取。在实际应用中，还需要注意样式设置的优先级问题...
style，getComputedStyle，currentStyle，defaultView，getPropertyValue
xuxiaoping1989的博客
01-21 572
一、getComputedStyle是什么？ getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。    1、语法如下：     var style = getComputedStyle("元素", false);     例如：     var dom
获取元素CSS值之getComputedStyle方法
qyaroon的博客
05-11 1246
1、getComputedStyle是？ getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。 语法如下： var style = window.getComputedStyle("元素", "伪类"); 例如： var dom = document.getEl
css声明变量 :root 伪类 以及 getPropertyValue()方法的各种细节
天空之上有座城
03-08 1625
:root 伪类及css声明变量 :root选择器用匹配文档的根元素，在HTML中根元素始终是HTML元素。但是:root的权重高于html 声明css变量，一般声明在:root根元素上，这样文档全局都可以取到 声明的变量名以--开头比如--text-color 在其他css样式中引用变量用var(--text-color) 相同的css变量，子级会覆盖:root级，也就是说，当某个元素取cs...
js获取html标签和style样式值
Haveyounow的博客
07-19 805
获取html标签 document.documentElement 获取style样式值 window.getComputedStyle(document.documentElement).getPropertyValue('font-size')
C#利用反射获取与设置对象的属性值
qq165285727的专栏
09-02 5018
这两个方法都是泛型方法，可以用于获取和设置对象的属性值。
getComputedStyle() 和 getPropertyValue()
weixin_30786657的博客
01-21 745
// getComputedStyle() 方法用于获取指定元素的 CSS 样式。 // 获取的样式是元素在浏览器中最终渲染效果的样式。 // getPropertyValue() 方法返回指定的 CSS 属性的值。 <style> #elem-container { width: 300px; height: 300p...
如何用Stata完成（shui）一篇经济学论文（三）：基本命令
热门推荐
Hedy_mail的博客
09-13 1万+
目录变量的生成变量的删除变量的更改 变量的生成 要生成一个新变量，我们就用gen（或者g），很明显就是generate的意思，gen（或g）后跟要生成新变量的名字（注意名字不能以数字开头），然后跟新变量生成的等价条件（可以加判断条件之类的，我们后面再讲），如果后面没有跟其他等价条件，则生成一个变量，变量里没有值。生成一个常量值，像我们之前举过的例子： gen x1 = 0 生成一个变量x1，x1的值为0。 生成一个变量，值等于另外一个变量的值，如: gen x2 = hour 这里我们生成了一个变量x2
getComputedStyle方法获取元素CSS值
weixin_33850015的博客
08-11 421
javascript的style属性只能获取内联样式，对于外部样式和嵌入式样式需要用currentStyle属性。但是，currentStyle在FIrefox和Chrome下不支持，需要用getComputedStyle 1、getComputedStyle是？ getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回...
getComputedStyle, getPropertyValue, getBoundingClientRect
最新发布
05-20
这三个方法都是 JavaScript 中常用的 DOM API，用于获取元素的样式和位置信息。 1. `getComputedStyle(element)` 方法返回一个对象，其中包含了指定元素的所有计算后样式，包括默认样式和内联样式。可以使用该方法获取元素的样式信息，例如： ``` const element = document.querySelector('.my-element'); const styles = window.getComputedStyle(element); console.log(styles.color); // "#333" console.log(styles.fontSize); // "16px" ``` 2. `getPropertyValue(propertyName)` 方法返回指定样式属性的计算后值。它需要一个参数，即要获取值的样式属性名称。例如： ``` const element = document.querySelector('.my-element'); const styles = window.getComputedStyle(element); console.log(styles.getPropertyValue('color')); // "#333" console.log(styles.getPropertyValue('font-size')); // "16px" ``` 3. `getBoundingClientRect()` 方法返回一个 DOMRect 对象，其中包含了指定元素的位置信息，包括 left、top、right、bottom、width、height 等属性。例如： ``` const element = document.querySelector('.my-element'); const rect = element.getBoundingClientRect(); console.log(rect.left); // 元素左侧距离视口左侧的距离 console.log(rect.top); // 元素顶部距离视口顶部的距离 console.log(rect.right); // 元素右侧距离视口左侧的距离 console.log(rect.bottom); // 元素底部距离视口顶部的距离 console.log(rect.width); // 元素的宽度 console.log(rect.height); // 元素的高度 ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值