Javascript 将宽度从百分比转换为像素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11358162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Converting width from percentage to pixels
提问by Swetha Bindu
I have a table inside a <div>:
我在 a 里面有一张桌子<div>：
<div id="fixeddiv">
<table id="fixedtable">
<tr class="firstrow">
<td class="td11"></td>
<td class="td12"></td>
<td class="td13"></td>
</tr>
<tr class="secondrow">
<td class="td21" style="width:10%"></td>
<td class="td22" style="width:20%"></td>
<td class="td23" style="width:70%"></td>
</tr>
</table>
</div>
CSS:
CSS：
#fixeddiv
{
overflow:auto;
margin:0px;
padding:0px;
position: relative;
text-align:left;
width: 48%;
}
#fixedtable
{
background-color: White;
border-spacing:0px;
cursor: pointer;
width: 100%;
height: 100%;
font-family: Calibri !important;
color: Black;
font-size: 14px;
}
.firstrow
{
position: absolute;
margin: 0px;
left: 0;
top: 0;
background: url(../Content/Images/header.jpg) repeat-x center top;
color: White;
font-weight: bold;
text-align: center;
}
#fixedtable tr td
{
padding: 5px !important;
border: 1px solid #FFFFFF;
text-align: center;
}
I am calculating the width of td21with $('.td21').width()and assigning the width to td11like $('td11').width($('.td21').width()).
我正在计算td21with$('.td21').width()的宽度并将宽度分配给td11like $('td11').width($('.td21').width())。
The problem is that the widths applying are not same, they vary by 1pxand I could not find how this 1pxdifference occur. The .td21width is 1pxgreater than .td11.
问题是应用的宽度不一样，它们各不相同，1px我找不到这种1px差异是如何发生的。的.td21宽度是1px大于.td11。
Can any one please help me to find the solution?
任何人都可以帮我找到解决方案吗？
回答by Nikola K.
<div id="div-1" style="width: 1000px;">
<div id="div-2" style="width: 10%;"></div>
</div>
<script language="javascript">
var percents = parseInt(document.getElementById("div-2").style.width);
var parentWidth = parseInt(document.getElementById("div-1").style.width);
var pixels = parentWidth*(percents/100);
alert(pixels); // will print "100"
</script>
回答by Chin
Try using .outerWidth()instead of .width()
尝试使用.outerWidth()而不是.width()
回答by WolvDev
This happens when you use percent + padding. Pixel is int and so it will be rounded.
当您使用百分比 + 填充时会发生这种情况。像素是整数，所以它会被四舍五入。
In your example: 10%, 20% and 70% is the width of the container and than you need to add the padding and border.
在您的示例中：10%、20% 和 70% 是容器的宽度，您需要添加填充和边框。
With this decimal numbers will occur and than need to be rounded.
有了这个十进制数字就会出现并且需要四舍五入。
EXAMPLE:
例子：
Your page is 900px width. Without padding, margin or border you will have widths of 630px (70%), 160px (20%), 90px (10%).
您的页面宽度为 900 像素。如果没有填充、边距或边框，您将拥有 630 像素 (70%)、160 像素 (20%)、90 像素 (10%) 的宽度。
But when you add the border + padding the percents must be calculated from 900 - (3 tds * 10px padding (left and right)) - (3 tds * 2px border(left and right)) = 864px.
但是当你添加边框 + 填充时，百分比必须从 900 - (3 tds * 10px padding (left and right)) - (3 tds * 2px border(left and right)) = 864px 计算。
With 864px width you will get: 604,8px (70%), 172,8px (20%), 86,4px (10%).
宽度为 864px，您将获得：604,8px (70%), 172,8px (20%), 86,4px (10%)。
And this is where the 1px difference occures.
这就是 1px 差异发生的地方。
