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>
网友回复
我知道答案，我要回答
私活外包
最新提问
js如何流式输出ai的回答并折叠代码块，点击代码块右侧可预览代码？
ai大模型如何将文章转换成可视化一目了然的图片流程图图表？
大模型生成html版本的ui原型图和ppt演示文档的系统提示词怎么写？
rtsp视频直播流如何转换成websocket流在h5页面上观看？
为啥coze会开源工作流agent coze studio？
如何检测网页是通过收藏夹打开的？
python如何实现类似php的http动态脚本请求处理响应代码？
js如何实现类似php的http动态脚本请求处理响应代码？
trae与solo有啥区别不同？
vue如何让ai动态生成问卷调查多步骤表单式收集基础信息自动规划执行任务？
