我设置了一个td的宽度为auto 在用 .css("width")取出为 auto 怎么才能得到真正宽度px
2个回答
展开全部
测试了一下，.width()求得的是不包括padding值在内的td宽度，不算是有误差。测试用例私信给你。
//js
$(document).ready(function(){
var tdWidth = $("td").eq(0).width();
var paddingLeft = parseInt($("td").eq(0).css("padding-left").replace('px',''));
var paddingRight = parseInt($("td").eq(0).css("padding-right").replace('px',''));
var daijiangeTd = (parseInt($("td").eq(1).offset().left) - parseInt($("td").eq(0).offset().left));
var jiange = daijiangeTd - tdWidth - paddingLeft - paddingRight;
$("#td-width").empty().html('td-width:' + tdWidth + 'px');
$("#padding-left").empty().html('padding-left:' + paddingLeft + 'px' );
$("#padding-right").empty().html('padding-right:' + paddingLeft + 'px' );
$("#daijiange").empty().html('带间隔:'+ daijiangeTd + 'px');
$("#jiange").empty().html('间隔:' + jiange + 'px');
});
//css
td{
width:auto;
height:100px;
border:1px solid #ABC;
padding:25px;
}
//输出
td-width:32px
padding-left:25px
padding-right:25px
带间隔:86px
间隔:4px
//js
$(document).ready(function(){
var tdWidth = $("td").eq(0).width();
var paddingLeft = parseInt($("td").eq(0).css("padding-left").replace('px',''));
var paddingRight = parseInt($("td").eq(0).css("padding-right").replace('px',''));
var daijiangeTd = (parseInt($("td").eq(1).offset().left) - parseInt($("td").eq(0).offset().left));
var jiange = daijiangeTd - tdWidth - paddingLeft - paddingRight;
$("#td-width").empty().html('td-width:' + tdWidth + 'px');
$("#padding-left").empty().html('padding-left:' + paddingLeft + 'px' );
$("#padding-right").empty().html('padding-right:' + paddingLeft + 'px' );
$("#daijiange").empty().html('带间隔:'+ daijiangeTd + 'px');
$("#jiange").empty().html('间隔:' + jiange + 'px');
});
//css
td{
width:auto;
height:100px;
border:1px solid #ABC;
padding:25px;
}
//输出
td-width:32px
padding-left:25px
padding-right:25px
带间隔:86px
间隔:4px
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你好，语言不太好说清楚，直接上代码。结合JQuery写出来的，table的所有TD都定义为auto可以取得宽度。我表格按百分比设置的，在不同大小的情况下，取值都正常。
希望我的回答对你有帮助。
<!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=utf-8" />
<title>无标题文档</title>
<style>.tabw td{width:auto;}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
var tdN = $("#tabw").find("td").length;
for(i=0; i<tdN; i++){
alert($("#tabw").find("td").eq(i).width());
}
});
</script>
</head>
<body>
<table id="tabw" width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</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=utf-8" />
<title>无标题文档</title>
<style>.tabw td{width:auto;}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
var tdN = $("#tabw").find("td").length;
for(i=0; i<tdN; i++){
alert($("#tabw").find("td").eq(i).width());
}
});
</script>
</head>
<body>
<table id="tabw" width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
