javascript 如何获得td的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5362560/
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
how to get the size of td
提问by sadi
i have a table which in which i have td .when i click in text field which has onkeypress event select values from database a table is shown from whic i select value.this select table is in div which position is fixed.but it will also chang the height
我有一个表，其中我有 td。当我单击具有 onkeypress 事件从数据库中选择值的文本字段时，会显示一个表，从中我选择值。这个选择表在 div 中，位置是固定的。但它也会改变高度
<td class="value">vehicle </td><td>
<input type="text" id="txt_sh_vid" onKeyPress="vhc_record()" maxlength="4">
<div id="div_vhc" class="search_form">
</div>
<input type="text" id="vid" style="display:none;">
JavaScript:
JavaScript：
function vhc_record() {
var data = 'vhc=' + document.getElementById('txt_sh_vid').value;
loadXMLDoc('ship/vehicle_ship/', 'div_vhc', data);
document.getElementById('div_vhc').style.visibility = "visible";
}
it is css of the above table
它是上表的css
td.value
{
background-color:#00628B;
color:#E6E6DC;
height:50;
}
div.search_form
{
position:fixed;
background-color:white;
}
when i press key in textfield it will also change the height of class="value"like div id="div_vhc"while its height is 50
当我在文本字段中按下键时，它也会更改class="value"的高度， 例如div id="div_vhc"而其高度为 50
回答by u476945
Here is the JSFiddle Demo. Let me know if this is what you are looking for:
这是JSFiddle 演示。如果这就是您要找的，请告诉我：
I am guessing what you are looking for is to grab td.valuewidth and height. You can use offsetHeightor offsetWidth
我猜你要找的是抓住td.value宽度和高度。您可以使用offsetHeight或offsetWidth
I am not very sure what you are trying to do, but to get the height of td.valueyou can do the following assume based on the structure of html. of course if you wish to traverse through all td element and find the element w/ the class name value then you'll have to use regex to match the element with value as part of its class:
我不太确定您要做什么，但是要获得高度，td.value您可以根据 html 的结构进行以下假设。当然，如果您希望遍历所有 td 元素并找到具有类名值的元素，那么您必须使用正则表达式将元素与作为其类的一部分的值进行匹配：
Your vhc_record function midified:
您的 vhc_record 函数已修改：
var myvalue = document.getElementsByTagName('td')[0]; //grabs the td.value element based on your html markup
document.getElementById('div_vhc').style.height = myvalue.offsetHeight+'px'; //sets div_vhc height to that of td.value
document.getElementById('div_vhc').style.width= myvalue.offsetWidth+'px';//sets div_vhc width to that of td.value
The changes i made to the html and css and i added some visiblity properties to make the example looks apparent:
我对 html 和 css 所做的更改，并添加了一些可见性属性以使示例看起来很明显：
<table><tr><td class="value">vehicle </td></tr></table>
<input type="text" id="txt_sh_vid" onKeyPress="vhc_record()" maxlength="4">
<div id="div_vhc" class="search_form">
</div>
<input type="text" id="vid" style="display:none;">
td.value
{
background-color:#00628B;
color:#E6E6DC;
height: 50px;
width: 50px;
}
#div_vhc
{
position:fixed;
background-color:white;
display: none;
border: 1px solid black;
}
回答by Jimmy Chandra
Step 1: Add table-layout:fixedto the TABLEelement style.
步骤 1：将table-layout:fixed添加到TABLE元素样式。
Step 2: Add overflow: hiddento the TDelement style.
第二步：添加overflow: hidden到TD元素样式。
Here is an example where the inner DIV is taller than the containing TD, but the TD will stay at 50 and hide the rest:
这是一个示例，其中内部 DIV 比包含的 TD 高，但 TD 将保持在 50 并隐藏其余部分：
<table style="table-layout:fixed">
<tr>
<td style="overflow:hidden;height:50px;border:solid 1px #000">
<div style="height:100px;background:#f00">Hello<br>I am a very<br>very<br>very<br>very<br>long<br>multiline<br>text...</div>
</td>
</tr>
</table>
if you want to have it scroll instead, use overflow:scroll in the td element style.
如果您想让它滚动，请在 td 元素样式中使用 overflow:scroll 。
