js获取某元素的class里面的css属性值代码


Posted in Javascript onJanuary 16, 2014

用js如何获取div中css的 margin、padding、height、border等。你可能说可以直接用document.getElementById("id").style.margin获取。但是你说的只能获取直接在标签中写的style的属性,无法获取标签style外的属性(如css文件中的属性)。而下面方法则两者值都可以获取。
实例效果图如下:

js获取某元素的class里面的css属性值代码

 

js在获取css属性时如果标签中无style则无法直接获取css中的属性,所以需要一个方法可以做到这点。
getStyle(obj,attr) 调用方法说明:obj为对像,attr为属性名必须兼容js中的写法(可以参考:JS可以控制样式的名称写法)。

Js代码

function getStyle(obj,attr){
    var ie = !+"\v1";//简单判断ie6~8
 if(attr=="backgroundPosition"){//IE6~8不兼容backgroundPosition写法,识别backgroundPositionX/Y
  if(ie){        
   return obj.currentStyle.backgroundPositionX +" "+obj.currentStyle.backgroundPositionY;
     }
 }
 if(obj.currentStyle){
  return obj.currentStyle[attr];
 }
 else{
  return document.defaultView.getComputedStyle(obj,null)[attr];
 }
}

完整实例测试代码:
Html代码

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js获取某元素的class里面的css属性值</title>
<style>
#box1{margin:5px;padding:5px;height:100px;width:200px;}
a{border:1px solid #ccc;border-radius:3px;padding:3px 5px;margin:5px 0;display:inline-block;background:#eee;color:#f60;text-decoration:none;font-size:12px;}
a:hover{color:#ff0000;background:#fff;}
</style>
</head>
<body>
<div id="box1">box1的css.#box1{margin:5px;padding:5px;height:100px;width:200px;}</div>
<a href="javascript:;" onclick="getcss('marginTop')">获取box1的margin-top</a><br />
<a href="javascript:;" onclick="getcss('paddingTop')">获取box1的padding-top</a><br />
<a href="javascript:;" onclick="getcss('height')">获取box1的height</a><br />
<script>
//获取class里面的属性值
var divs=document.getElementById("box1");
function getStyle(obj,attr){
    var ie = !+"\v1";//简单判断ie6~8
 if(attr=="backgroundPosition"){//IE6~8不兼容backgroundPosition写法,识别backgroundPositionX/Y
  if(ie){        
   return obj.currentStyle.backgroundPositionX +" "+obj.currentStyle.backgroundPositionY;
     }
 }
 if(obj.currentStyle){
  return obj.currentStyle[attr];
 }
 else{
  return document.defaultView.getComputedStyle(obj,null)[attr];
 }
}
function getcss(typ){
 alert(getStyle(divs,typ));
}
</script>
</body>
</html>
Javascript 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
windows下vue-cli导入bootstrap样式
Apr 25 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
微信小程序入门之绘制时钟
Oct 22 Javascript
JS可以控制样式的名称写法一览
Jan 16 #Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 #Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 #Javascript
利用浏览器全屏api实现js全屏
Jan 16 #Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 #Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 #Javascript
javascript中验证大写字母、数字和中文
Jan 15 #Javascript
You might like
第六节--访问属性和方法
2006/11/16 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
利用CSS3在Angular中实现动画
2016/01/15 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
layui动态渲染生成select的option值方法
2019/09/23 Javascript
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
美国五金商店:Ace Hardware
2018/03/27 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
村级四风对照检查材料
2014/08/24 职场文书
活动总结新闻稿
2014/08/30 职场文书
故宫的导游词
2015/01/31 职场文书
慰问信格式
2015/02/14 职场文书
个人总结格式范文
2015/03/09 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书