javascript-更改IE8中禁用的属性会导致组件调整大小并引发异常
当我试图更改HTML文本输入组件的Disabled属性时，父组件（表）的大小将被调整 我必须使用div对组件进行分组，因此无法通过删除div来修复它 下面是一些演示视频和要复制的示例代码：javascript-更改IE8中禁用的属性会导致组件调整大小并引发异常,javascript,internet-explorer,Javascript,Internet Explorer,当我试图更改HTML文本输入组件的Disabled属性时，父组件（表）的大小将被调整 我必须使用div对组件进行分组，因此无法通过删除div来修复它 下面是一些演示视频和要复制的示例代码： 为什么要禁用而不是？因为原始代码的div中包含5大组组件。我不想亲自为每个组件设置Disabled属性，所以我只需将其递归到容器Div中并执行该工作。除了IE8之外，所有浏览器都会毫无问题地执行此代码。请尝试在结尾处返回false以停止事件冒泡到Baz1nga：您的意思是在递归方法的结尾处添加return语句
为什么要禁用而不是？因为原始代码的div中包含5大组组件。我不想亲自为每个组件设置Disabled属性，所以我只需将其递归到容器Div中并执行该工作。除了IE8之外，所有浏览器都会毫无问题地执行此代码。请尝试在结尾处返回false以停止事件冒泡到Baz1nga：您的意思是在递归方法的结尾处添加return语句？
<html>
<HEAD>
<meta charset="utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>test bug</title>
<style type="text/css">
.tableCell {
border-style: solid;
border-width: 1px;
border-color: #0000ff;
}
.textInput {
width: 100%;
}
</style>
<script type="text/javascript">
function toggleByDivId() {
toggleDisabled( document.getElementById( "divTextInput" ) ) ;
}
function toggleDisabled( el ) {
try {
//el.enablement = el.enablement == "enabled" ? "disabled" : "enabled"; // object doesn't support this property or method
//el.setAttribute( 'disabled', true ); // object doesn't support this property or method
//el.attributes.disabled = true; // 'attributes' is null or not an object
el.disabled = !el.disabled ? true : false; // IE object doesn't support this property or method
}
catch( err ) {
var errMsg =
"err: " + err +
"\r\nerr.number & 0xFFFF: " + (err.number & 0xFFFF) +
"\r\nerr.description: " + err.description +
"\r\nel.nodeName: " + el.nodeName +
"\r\nel.nodeType: " + el.nodeType ;
alert( errMsg );
}
if (el.childNodes && el.childNodes.length > 0) {
for (var x = 0; x < el.childNodes.length; x++) {
toggleDisabled( el.childNodes[x] );
}
}
}
</script>
</HEAD>
<body >
<table border="0" width="100%">
<tr>
<td width="40%" class="tableCell" >
<input type="button" value="Set Text Disabled" onclick="toggleByDivId();" >
</td>
<td width="20%" class="tableCell" > </td>
<td width="40%" class="tableCell" >
<div id="divTextInput" >
<input id="textInput" type="text" class="textInput" >
</div>
</td>
</tr>
</table>
</body>
</html>