javascript - 如果设置了 doctype，CSS 不能通过 javascript 应用于表单元素

Question

我有这样的文本框：

<input id="patId1" type="text" name="patId1" value="">

当页面加载时，会调用一个脚本来设置文本框的宽度。该代码如下：

document.getElementById("patId1").style.width = document.getElementById("patId2").offsetWidth;

其中，patId2 是一个下拉列表（选择标签）。基本上我想要做的是将文本框的宽度设置为与下拉列表的宽度相同。

现在，如果设置了 DOCTYPE，那么上面的脚本就不起作用了。但如果未设置，则应用宽度。

任何帮助。

Answer 1

的值offsetWidth将是一个数字。CSSwidth属性接受一个长度。长度（除了0）必须有单位。在 quirks 模式下，浏览器违反 CSS 规范并采用px单位。

document.getElementById("patId1").style.width = document.getElementById("patId2").offsetWidth + 'px'

Answer 2

将“px”附加到 dropdown 的 offsetWidth 上。JSFiddle： http: //jsfiddle.net/whizkid747/ysj2t/1/：document.getElementById("patId1").style.width = document.getElementById("patId2").offsetWidth + "px";

Answer 3

有一种更简单的方法可以做到这一点，我重新使用了@cychan 的以下帖子中的代码：

关联：

用户想要选择选项后如何扩展“选择”选项宽度

这是一般方法：

<div id="select-wrapper-01" style="width: 180px; overflow: hidden;">
    <select style="width: auto;" name="abc" id="10">
        <option value="-1">Any</option>
        <option value="123">123</option>
    </select>
</div>

现在您可能会说，“等一下？我最大的选择选项不是 180 像素宽！​​”

在这种情况下，width请overflow从div.

然后使用 javascript 为周围的 div 提供适当的宽度，例如：

var actualWidth = document.getElementById("patId2").offsetWidth;
document.getElementById("select-wrapper-01").style.width = actualWidth + 'px';

这是关于 jsfiddle 的工作副本。没什么花哨的，但它确实有效。

http://jsfiddle.net/acegyver/eTEuk/

您可以尝试使用 select option，使它们更长或更短，并查看它们select将如何动态适应。

在应得的地方给予赞扬：正如我所说，我从@cychan 的现有帖子中调整了代码。适用于您的问题的实施由我负责。