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 相关文章推荐
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
vue中动态select的使用方法示例
Oct 28 Javascript
使用Vue实现一个树组件的示例
Nov 06 Javascript
element多个表单校验的实现
May 27 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二维/三维数组转字符串
2013/09/13 PHP
php创建session的方法实例详解
2015/01/27 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
python类参数self使用示例
2014/02/17 Python
python获取图片颜色信息的方法
2015/03/18 Python
Hadoop中的Python框架的使用指南
2015/04/22 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
python如何实现反向迭代
2018/03/20 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
python 求10个数的平均数实例
2019/12/16 Python
python用700行代码实现http客户端
2021/01/14 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
企业法人代表任命书
2014/06/06 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
居住证明范文
2015/06/17 职场文书