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 相关文章推荐
Opacity.js
Jan 22 Javascript
js function使用心得
May 10 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
js中url对象化管理分析
Dec 29 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
如何手写简易的 Vue Router
Oct 10 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的图形函数中显示汉字
2006/10/09 PHP
PHP在Web开发领域的优势
2006/10/09 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
python 提取文件的小程序
2009/07/29 Python
Django中对数据查询结果进行排序的方法
2015/07/17 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
毕业生自荐书模版
2014/01/04 职场文书
个人课题方案
2014/05/08 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
祝酒词范文
2015/08/12 职场文书
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技