导航:首页 > 编程语言 > jscomputedstyle

jscomputedstyle

发布时间:2024-11-21 01:57:39

js怎么获取css样式里的background属性值呢

ss文件中如何得到某个属性值:
一、getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值,
返回的是一个CSS样式声明对象 , 只读, 此方法支持Firefox浏览器;
语法:var style=window.getComputedStyle(“元素”,“伪类”);第一个参数是必须的,第二个为可选的。
二、currentStyle 是一款可以兼容IE浏览器的属性返回的是当前所有最终使用的CSS属性值,
利用element.CurrentStyle.attribute可获取
其与getComputedStyle区别:1、 currentStyle不支持伪类样式获取;
2、currentStyle不支持现代浏览器,支持IE

代码说明:

[html] view plain
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#div1{
width:100px;height:100px;background: red;
}
</style>
<body>
<div id="div1"></div>
</body>
<script type="text/javascript">
var oDiv = document.getElementById('div1');
/*
只能获取,不能设置
获取到的是计算后的样式
最好不要获取复合样式
所获取的样式要设初使值
获取到的样式类型是字符串
别空格 [' width']
*获取到的样式带px的
transform 获取不到
transition 不准确
*/
function getStyle(obj,attr){
if(obj.currentStyle){ //IE
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,"伪类")[attr]; //Firefox
}
}

alert(getStyle(oDiv1,'background'));</html></span>

㈡ 急!怎么用js提取出span标签内style里的属性值

CSS的样式分为三类:
内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效。
内部样式:是写在HTML的里面的,内部样式只对所在的网页有效。
外部样式表:如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件。

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式对象([object CSSStyleDeclaration])
currentStyle是IE浏览器的一个属性,返回的是CSS样式对象

element指JS获取的DOM对象
element.style //只能获取内嵌样式
element.currentStyle //IE浏览器获取非内嵌样式
window.getComputedStyle(element,伪类) //非IE浏览器获取非内嵌样式
document.defaultView.getComputedStyle(element,伪类)//非IE浏览器获取非内嵌样式
注:Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null),现在可以省略这个参数。

下面的html中包含两种css样式,id为tag的div是内嵌样式,而id为test的div样式为内部样式.

<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="Generator"content="EditPlus®">
<metaname="Author"content="YvetteLau">
<metaname="Keywords"content="关键字">
<metaname="Description"content="描述">
<title>Document</title>
<style>
#test{
width:500px;
height:300px;
background-color:#CCC;
float:left;
}
</style>
</head>
<body>
<divid="test"></div>
<divid="tag"style="width:500px;height:300px;background-color:pink;"></div>
</body>
</html>
<scripttype="text/javascript">
window.onload=function(){
vartest=document.getElementById("test");
vartag=document.getElementById("tag");

//CSS样式对象:CSS2Properties{},CSSStyleDeclaration
console.log(test.style);//火狐返回空对象CSS2Properties{},谷歌返回空对象CSSStyleDeclaration{}
console.log(tag.style);//返回CSS2Properties{width:"500px",height:"300px",background-color:"pink"}
//element.style获取的是内嵌式的style,如果不是内嵌式,则是一个空对象

console.log(tag.style.backgroundColor);//pink
console.log(tag.style['background-color']);//pink
//获取类似background-color,border-radius,padding-left类似样式的两种写法啊

console.log(test.currentStyle)//火狐和谷歌为Undefined,IE返回CSS对象
console.log(window.getComputedStyle(test,null))//谷歌返回CSSStyleDeclaration{……},火狐返回CSS2Properties{……}
console.log(window.getComputedStyle(test))
//效果同上,但是在Gecko2.0(Firefox4/Thunderbird3.3/SeaMonkey2.1)之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null)

console.log(test.currentStyle.width);//500px(IE)
console.log(window.getComputedStyle(test).width);//500px;
console.log(window.getComputedStyle(test)['width']);//500px;
//document.defaultView.getComputedStyle(element,null)[attr]/window.getComputedStyle(element,null)[attr]
}
</script>

㈢ js中style,currentStyle和getComputedStyle的区别

obj.currentStyle[attr];这样是取这个属性,attr是变量。可以是height,可以是width。如果obj.currentStyle.attr是去取样式的attr属性,实际版上这个属性是不存在的,所权以不行。//什么时候写成[attr]这样attr是个变量的时候。returngetComputedStyle(obj,false)[attr];//这个也是,同样有些不理解同上

阅读全文

与jscomputedstyle相关的资料

热点内容
ps入门必备文件 浏览:348
以前的相亲网站怎么没有了 浏览:15
苹果6耳机听歌有滋滋声 浏览:768
怎么彻底删除linux文件 浏览:379
编程中字体的颜色是什么意思 浏览:534
网站关键词多少个字符 浏览:917
汇川am系列用什么编程 浏览:41
笔记本win10我的电脑在哪里打开摄像头 浏览:827
医院单位基本工资去哪个app查询 浏览:18
css源码应该用什么文件 浏览:915
编程ts是什么意思呢 浏览:509
c盘cad占用空间的文件 浏览:89
不锈钢大小头模具如何编程 浏览:972
什么格式的配置文件比较主流 浏览:984
增加目录word 浏览:5
提取不相邻两列数据如何做图表 浏览:45
r9s支持的网络制式 浏览:633
什么是提交事务的编程 浏览:237
win10打字卡住 浏览:774
linux普通用户关机 浏览:114

友情链接