Question

我必须增加onmouseover上的select元素的宽度并减小onmouseout的宽度.select元素在table的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>

Answer 1

您的代码似乎按照您的指示行事。

在onmouseover期间，它会将select的宽度设置为27px，因为最长的option是一个字符。

在onmouseout期间，它将select的宽度设置为7px。

请注意，27px的宽度不足以在select中显示单个字符。 7px几乎不足以显示下拉箭头。

在下面的代码段中，我添加了27px和7px的div。您会在select和onmouseover期间看到您的onmouseout框与每个框匹配。

如果您希望select更宽，请使用大于27和7的值。您可能需要尝试找出最适合您的方法。

如果您希望select在onmouseout期间恢复原始宽度，可以这样做：

function AdjustWidthOut(ddl) {
  ddl.style.width = 'auto;
}

<强>段：

＆＃13;

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 * 24 + "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"; 
}

＆＃13;

#D1 {
  width: 27px;
  height: 20px;
  background: green;
}

#D2 {
  width: 7px;
  height: 20px;
  background: green;
}

＆＃13;

<table>
  <tr>
   <td>27px:
   <td><div id="D1"></div>
  <tr>
   <td>7px:
   <td><div id="D2"></div>
  <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>

＆＃13;

Answer 2

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

http://jsfiddle.net/1k03tvmu/

table{border: 1px solid;}
tr{border: 1px solid;}
td{ width: 100px; position: relative;}
td.content{width: 1000px; }

如何在增加select元素onmouseover和onmouseout的大小的同时修复表的位置

2 个答案: