1、原生js这样来获取：
<!DOCTYPE html>2、jquery的话这样：$(selector).css(name)
<html>
<head>
<meta charset="UTF-8">
<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="BfwJavascript;"BfwOnclick="getMarginTop()">获取box1的margin-top</a><br />
<a href="BfwJavascript;"BfwOnclick="getcss('paddingTop')">获取box1的padding-top</a><br />
<a href="BfwJavascript;"BfwOnclick="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));
//我们来修改一下margintop的值，再次获取实时
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");
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery获取某元素的class里面的css属性值</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<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="BfwJavascript;"BfwOnclick="getMarginTop()">获取box1的margin-top</a><br />
<a href="BfwJavascript;"BfwOnclick="getcss('paddingTop')">获取box1的padding-top</a><br />
<a href="BfwJavascript;"BfwOnclick="getcss('height')">获取box1的height</a><br />
<script>
function getMarginTop() {
alert($("#box1").css("marginTop"));
//我们来修改一下margintop的值，再次获取实时
$("#box1").css("marginTop","10px");
alert($("#box1").css("marginTop"));
}
function getcss(typ) {
alert($("#box1").css(typ));
}
</script>
</body>
</html>
网友回复
我知道答案，我要回答
私活外包
