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出生日期 年月日级联菜单示例代码
Jan 10 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 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
PHP 快速排序算法详解
2014/11/10 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
layui table 参数设置方法
2018/08/14 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
Python回调函数用法实例详解
2015/07/02 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
python opencv之SIFT算法示例
2018/02/24 Python
Python聊天室程序(基础版)
2018/04/01 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
python3 实现调用串口功能
2019/12/26 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
高中三年学习生活的自我评价
2013/10/10 职场文书
玩具公司的创业计划书
2013/12/31 职场文书
加工操作管理制度
2014/01/19 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
初中政教处工作总结
2015/08/12 职场文书
canvas 中如何实现物体的框选
2022/08/05 Javascript