<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>getStyle</title>
<style>
.defaultCls{
width:200px;
height:300px;
border:1px solid windowtext;
}
</style>
<script>
function check(){
var obj = document.getElementById("content");
alert(getStyle(obj,"width"));
}
function getStyle(obj,styleName){
if (styleName==null){
return "";
}
var str = styleName;
var pos = str.indexOf("-");
while(pos>=0){
if (pos == str.length - 1){
str = str.substring(0,pos);
}
else if(pos == str.length - 2){
str = str.substring(0,pos)+str.substring(pos + 1).toUpperCase();
}
else{
str = str.substring(0,pos)+str.substring(pos + 1,pos + 2).toUpperCase()+str.substring(pos + 2);
}
pos = str.indexOf("-");
}
var style = "";
if (obj.currentStyle)
style = obj.currentStyle[str];
else if (window.getComputedStyle)
style = document.defaultView.getComputedStyle(obj,null).getPropertyValue(str);
return style || "";
}
</script>
</head>
<body>
<div id="content" style="font-size:12px" class="defaultCls">sfsd
</div>
<input type="button" value="check" onclick="check()" />
</body>
</html>
平常我们都是使用dom.style.display这种方式去获取某一个样式，可这样就会有个问题，如果我的样式是定义在class中的，这种方式就无能为力了。
还好浏览器提供给我们解决方法，那就是使用currentStyle属性或者是document.defaultView.getComputedStyle函数，不同浏览器的处理方式不一样。
这样我们就可以获取到我们想要的结果，不论是定义在style中还是class中。
上面的代码在ie以及Firefox中测试通过，其他浏览器未测试。
分享到：
相关推荐
如果想获取元素的某一个具体的样式属性值 1、元素.style.属性名 需要我们把元素的样式都写在行内样式上才可以（写在样式表中是不管用的） console.log(box.style.height) ->null 在真实项目中，这种方式不常用，...
主要介绍了css判断某元素的子元素个数并分别设置样式的方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
但是如果样式是在外链link中的或者是页面的非行内样式，就获取不到了。 在标准浏览器中可以通过window.getComputedStyll(obj,null)[property]来获取外链样式，但是在ie浏览器中则是通过obj.currentStyle来获取。 ...
html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。 因为每个浏览器渲染页面的方式都不尽相同，所以生成的图片也不太一样。虽然它目前还是处理开发阶段，但还是很...
（2）将第一个checkbox表单元素应用.green样式 （3）求id值为checkbox3的元素在所有表单元素里的顺序号 （4）用一条链式语句完成：先对所有img元素应用seeThrough样式，再为所有img元素和tr元素应用yellow样式...
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。 p{ font-size:14px; } <p>css CSS基础选择器编写 ID选择器：规定用#来定义（名字自定义） 针对某一个...
兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。 临近兄弟选择器 普通兄弟选择器 临近兄弟选择器（+） 定义 该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一...
网页设计作业代码模板.HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．...CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
将当前页面中所有的这个标签名都选择出来 修改样式 不能修改某一个的样式 ②类选择器 单独选择一个或某几个标签 .类名 { 属性1： 值； 属性2： 值； } 口诀：样式点定义 结构类（class）调用 一个...
8. 如何使用jQuery来代替一个元素： 4 9. 如何验证某个元素是否为空： 4 10. 如何从一个未排序的集合中找出某个元素的索引号 4 11. 如何把函数绑定到事件上： 4 12. 如何追加或是添加html到元素中： 4 13. 在创建...
独立于任何网页位置处，声明一个样式文件(.css为后缀)，在文件中声明样式，在使用的网页中引入.css文件。 使用步骤： 1.创建样式表文件（.css） 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <...
3、如何获取jQuery集合的某一项； 4、同一函数实现set和get； 5、集合处理功能； 6、扩展我们需要的功能； 7、支持方法的连写； 8、操作元素的样式； 9、完善的事件处理功能； 10、几个实用特效功能； 11、几个有用...
3、如何获取jQuery集合的某一项； 4、同一函数实现set和get； 5、集合处理功能； 6、扩展我们需要的功能； 7、支持方法的连写； 8、操作元素的样式； 9、完善的事件处理功能； 10、几个实用特效功能； 11、...
使用选择器是件美妙的事 id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等
我们看过一些样式表文件的样式名都写的很长，比如：body #header .topbar.logo{…}，这是因为利用了元素的继承关系，利用元素名，或者ＩＤ名和类名（也就是class名）来精确定位和描述某一个区域的css样式表格式。...
它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接...CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]
实例075 只有一个复选框时控制复选框的全选或反选 119 2.5 密码域 120 实例076 让您的密码域更安全 120 实例077 不提交表单自动检测密码域是否相同 121 2.6 表单应用 122 实例078 通过JavaScript控制表单的提交与...
在复杂的页面中，某一个元素有可能会从很多地方获取样式，例如一个网站的某一 级标题整体设置为使用绿色，而对某个特殊栏目需要使用蓝色，这样在栏目中就需 要覆盖通用的样式设置。在很简单的页面中，这样的特殊需求...
本文主要介绍了如何用javascript判断dom是否有存在某class的值。具有很好的参考价值，下面跟着小编一起来看下吧
21.7 使用DOM获取页面中某控件的属性 21.8 将某行排在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用：AJAX和Property的应用技巧 22.1 ...