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

本文介绍了一种使用JS获取HTML元素内CSS属性值的方法，包括margin、padding、height等，适用于解决标签中无style时无法直接获取css属性的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章主要介绍了js获取某元素的class里面的css属性值代码，有需要的朋友可以参考一下

用js如何获取div中css的 margin、padding、height、border等。你可能说可以直接用document.getElementById("id").style.margin获取。但是你说的只能获取直接在标签中写的style的属性，无法获取标签style外的属性（如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 id="href1" href="javascript:;" onclick="getMarginTop()">获取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 getMarginTop() {
		var typ='marginTop';
		alert(getStyle(divs, typ));
		divs.style.marginTop = '10px';
		alert(getStyle(divs, typ));
	}

    function getcss(typ) {
        alert(getStyle(divs, typ));
    }

    window.onload = function(){
    	var box1 = document.getElementById("box1");
    	var href1 = document.getElementById("href1");
    	// href1.addEventListener('click', function(){
    	// 	alert(getStyle(box1, 'marginTop'));
    	// 	box1.style.marginTop = '10px';
    	// 	alert(getStyle(box1, 'marginTop'));
    	// });
    };
    </script>
</body>

</html>