Question

为什么我的代码在IE7中不起作用（显示/隐藏元素）？

首先，它会显示图像和隐藏按钮。选中此框后，图像将隐藏，按钮将显示。

我在Chrome和Firefox中测试过，他们没问题，但在IE7中它不起作用。我怎样才能使它发挥作用？

的 HTML 的

<img id="thumbnail_image" src="http://static.adzerk.net/Advertisers/d9a919813dac42adbd0e3106bc19bc04.png" style=" max-height: 100px; max-width: 100px; border: 1px dashed #ccc; ">
<input type="file" id="offer_image_1" size="30" style="float: left;" hidden >
<input type="checkbox" id="change_thumbnail_image" /> Change Image

的 JS 的

<script type="text/javascript">
document.getElementById('change_thumbnail_image').onchange = function() {
    document.getElementById('thumbnail_image').hidden = this.checked;
    document.getElementById('offer_image_1').style.display = this.checked ? 'block' : 'none';
};
</script>

Answer 1

表单元素上的onchange事件通常不会在Internet Explorer中触发，直到用户将焦点移离该控件。任何HTML元素都没有hidden属性。使用“onclick”事件，并在“image_thumbnail”上设置样式对象的display属性以获得正确的效果。

document.getElementById('change_thumbnail_image').onclick = function() {
    document.getElementById('thumbnail_image').style.display = this.checked ? 'none' : 'block';
    document.getElementById('offer_image_1').style.display = this.checked ? 'block' : 'none';
};

要在页面加载时隐藏“offer_image_1”元素：

<input type="file" id="offer_image_1" size="30"
    style="float: left; display: none;">

为什么我的代码在IE7中不起作用（显示/隐藏元素）？

1 个答案: