![css基础教程：[1]为网页使用网络字体](https://exp-picture.cdn.bcebos.com/cca2552c56ee7b7f34c65fc66ef4fcf5ef0d411f.jpg)
css基础教程：[1]为网页使用网络字体,本教程为大家介绍在网页上怎么使用网络字体。1，使用网络字体的好处是所有人看到的效果都是样的，效果统一，2，不依赖于用户电脑上是否安装了该字体。......
2023-03-16 330 CSS
如何javascript获取css中的样式
来源：互联网
2023-03-16 19:17:34 版权归原作者所有，如有侵权，请联系我们
obj.style.height只能获取行间样式,但是我们要怎么获取写在css文件中的样式呢?
工具/原料
- Dreamweaver
方法/步骤
首先我们要用一个新的方法currentStyle.这个方法由current和style两个单词组成意思是:目前的样式.也就是加载css文件后取出来的样式.
currentStyle的用法是:元素.currentStyle.属性名
下面我们开始获取如图div1的width样式,那我们就需要这样写:
var w=document.getElementById('div1').currentStyle.width;
alert(w);
在IE下调试,看是不是可以得到正确的宽度了
IE可以了然后我们换个火狐试试,无论我怎么刷新都没有弹出我希望的200px,f12调试一下,原来如此,火狐不支持currentStyle方法.
火狐和Chrome支持的是另外一个方法:getComputedStyle,大概意思就是获取完成的样式.
用法:getComputedStyle(元素,false).属性名
同2,我们的代码应该这样写:
var w=getComputedStyle(document.getElementById('div1'),false).width;
alert(w);
现在不报错了,也能正常的获取了
可是我们用ie试试,肯定没反应了.因为ie又不支持getComputedStyle了.....是不是很蛋疼
所以现在我们要写一个函数叫做getClass;
内容如下:
//兼容获取非行间样式
function getClass(obj,name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];//IE下获取非行间样式
}
else
{
return getComputedStyle(obj,false)[name];//FF、Chorme下获取费行间样式
}
}
然后我们想要获取css中的样式就这样写:
var w=getClass(document.getElementById('div1'),"width");
alert(w);
试试ie,试试火狐.都很ok的啦
注意事项
- 在js中'[]'的作用和'.'的是一样的,所以函数里面写的是obj.currentStyle[name]。
- 获取背景颜色的时候不能直接用background,要用background-color
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： CSS
上一篇：如何用CSS控制div画三角形、圣诞树 下一篇：如何创建CSS文件
相关文章
- 详细阅读
-
怎么用div布局加css样式做网页详细阅读
怎么用div布局加css样式做网页,怎么做一个网页呢，静态页面的制作是很简单的，我们来看看怎么通过div布局 c样式来制作一个网页吧。......
2023-03-16 480 CSS
- 详细阅读
