下面的代码用于表格中的两个选择元素,但第一个元素影响第二个元素的位置。 onmouseover 和onmouseout select 元素宽度变化时如何固定位置
运行访问http://jsfiddle.net/1k03tvmu/3/
请帮帮我!!!
<table>
<tr>
<td valign="top"><strong style="color: #3265a6">Area: </strong></td>
<td class="content">
<select style='FONT-SIZE: 9pt;width: 100px;' class="txtbox" id="hotelId_" size="5" multiple>
<option value="All">Something</option>
</select>
<select style='FONT-SIZE: 9pt;width: 100px;' class="txtbox" id="Id" size="5" multiple>
<option value="All">Something</option>
</select>
</td>
</tr>
JavaScript:
element = document.getElementById('hotelId_');
element.addEventListener("mouseover",function(){
var maxWidth = 0;
for (var i = 0; i < element.length; i++) {
if (element.options[i].text.length > maxWidth) {
maxWidth = element.options[i].text.length;
}
}
element.style.width = maxWidth * 27 + "px";
});
element.addEventListener("mouseout",function(){
var maxWidth = 0;
for (var i = 0; i < element.length; i++) {
if (element.options[i].text.length > maxWidth) {
maxWidth = element.options[i].text.length;
}
}
element.style.width = maxWidth * 7 + "px"; });
最佳答案
您有两个具有相同 ID hotelId_
的元素,这是不正确的。
然后你使用这个Id从javascript中获取元素
element = document.getElementById('hotelId_');
尝试分配两个不同的 id 并将 id 传递给编辑 html 的函数
更新
尝试删除 td.content{width: 1000px; }
来自 CSS
更新 2
尝试 this fiddle
现在它像你预期的那样工作了,只需在改变宽度时改变相对于绝对的位置
element = document.getElementById('hotelId_');
element.addEventListener("mouseover",function(){
var maxWidth = 0;
for (var i = 0; i < element.length; i++) {
if (element.options[i].text.length > maxWidth) {
maxWidth = element.options[i].text.length;
}
}
element.style.width = maxWidth * 27 + "px";
element.style.position="absolute";
});
element.addEventListener("mouseout",function(){
var maxWidth = 0;
for (var i = 0; i < element.length; i++) {
if (element.options[i].text.length > maxWidth) {
maxWidth = element.options[i].text.length;
}
}
element.style.width = maxWidth * 7 + "px";
element.style.position="relative";
});
关于javascript - 如何在更改选择元素的宽度时固定所有元素位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27130435/