Javascript 如何在增加onmouseover和onmouseout的select元素的大小时固定表的位置_Javascript_Html_Css

Javascript 如何在增加onmouseover和onmouseout的select元素的大小时固定表的位置

javascript html css

Javascript 如何在增加onmouseover和onmouseout的select元素的大小时固定表的位置,javascript,html,css,Javascript,Html,Css,我必须增加mouseover上select元素的宽度，减少mouseout上的宽度。select元素是在表的td元素下定义的。我已经做了一些编码来更改它的大小，但它会影响表的位置如何解决这个问题请帮帮我 <head> <script> function AdjustWidth(ddl) { var maxWidth = 0; for (var i = 0; i < ddl.length; i++) { if (ddl.options[i].text.l

我必须增加mouseover上select元素的宽度，减少mouseout上的宽度。select元素是在表的td元素下定义的。我已经做了一些编码来更改它的大小，但它会影响表的位置

如何解决这个问题

请帮帮我

<head>
<script>

function AdjustWidth(ddl) {
var maxWidth = 0;
for (var i = 0; i < ddl.length; i++) {
    if (ddl.options[i].text.length > maxWidth) {
        maxWidth = ddl.options[i].text.length;
    }
}
ddl.style.width = maxWidth * 27 + "px";

}
function AdjustWidthOut(ddl) {
var maxWidth = 0;
for (var i = 0; i < ddl.length; i++) {
    if (ddl.options[i].text.length > maxWidth) {
        maxWidth = ddl.options[i].text.length;
    }
}
ddl.style.width = maxWidth * 7 + "px"; 
}
</script>
</head>
 <table>
  <tr>                            
   <td valign="top"><strong style="color: #3265a6">Area:&nbsp;</strong></td>
   <td>
     <select onmouseover="AdjustWidth(this)" onmouseout="AdjustWidthOut(this)">
         <option value="">x</option>
         <option value="">y</option>
         <option value="">z</option>
         <option value="">x</option>
     </select>
   </td>
  </tr>
 </table>


功能调整宽度（ddl）{
var maxWidth=0；
对于（变量i=0；imaxWidth）{
maxWidth=ddl.options[i].text.length；
}
}
ddl.style.width=maxWidth*27+“px”；
}
功能调整宽度输出（ddl）{
var maxWidth=0；
对于（变量i=0；imaxWidth）{
maxWidth=ddl.options[i].text.length；
}
}
ddl.style.width=maxWidth*7+“px”；
}
区域：
x
Y
Z
x

您需要为表格和/或行和列设置宽度，否则表格宽度将设置为其内容的100%。看看我创建的这个提琴，它只改变了下拉元素的宽度

您的代码似乎执行了您指示它执行的操作

在mouseover期间，它将

选择

的宽度设置为27px，因为最长的

选项

是一个字符

在mouseout的

onmouseout

过程中，它将

select

的宽度设置为7px

请注意，27px不够宽，无法在

选择中显示单个字符。7px的宽度几乎不足以显示下拉箭头
在下面的代码片段中，我添加了27px和7px的div。在onmouseover
和onmouseout
期间，您将看到您的select
框与它们中的每一个都匹配
如果希望选择的更宽，请使用大于27和7的值。你可能需要进行实验，找出最适合你的方法
如果您希望选择
在onmouseout
过程中恢复到其原始宽度，可以这样做：
function AdjustWidthOut(ddl) {
  ddl.style.width = 'auto;
}

片段：

功能调整宽度（ddl）{
var maxWidth=0；
对于（变量i=0；imaxWidth）{
maxWidth=ddl.options[i].text.length；
}
}
ddl.style.width=maxWidth*24+“px”；
}
功能调整宽度输出（ddl）{
var maxWidth=0；
对于（变量i=0；imaxWidth）{
maxWidth=ddl.options[i].text.length；
}
}
ddl.style.width=maxWidth*7+“px”；
}
#D1{
宽度：27px；
高度：20px；
背景：绿色；
}
#D2{
宽度：7px；
高度：20px；
背景：绿色；
}

27px：
7px：
区域：
x
Y
Z
x
你为什么说它在改变桌子的位置？我只看到宽度增加/减少。我知道，这可能只是一个例子，顺便说一句，有时身体标签会有所帮助
function AdjustWidthOut(ddl) {
  ddl.style.width = 'auto;
}