如何获得td的大小

Question

我有一个表,其中我有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的:

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";
}

这是上表的CSS

    td.value
    {
    background-color:#00628B;
    color:#E6E6DC;
    height:50;

    }

    div.search_form
    {
    position:fixed;
     background-color:white;

}

当我按下文本字段中的键时,它也会改变class ="value"的高度, 如div id ="div_vhc",而它的高度为50

Answer 1

这是JSFiddle演示.如果您正在寻找,请告诉我:

我猜你要找的是抓住td.value宽度和高度.你可以使用offsetHeight或offsetWidth

我不太确定你要做什么,但要获得td.value你的高度,可以根据html的结构做以下假设.当然,如果你想遍历所有的td元素并找到带有类名值的元素,那么你将不得不使用正则表达式来匹配元素值作为其类的一部分:

您的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

我对html和css所做的更改和我添加了一些visiblity属性,使示例看起来很明显:

<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;
}