Question

为什么无法在 JavaScript 中读取 null 的属性“style”？

2013-06-26

5079

javascript html css

我一直卡在这个 javascript 错误上！我只想在单击按钮时编辑 CSS 属性的两个值。我一直收到此错误：

Uncaught TypeError: Cannot read property 'style' of null

它发生在第一个 document.getElementById 行（下面）。

我已经在页面的页脚中添加了 JavaScript，但也在其他位置进行了尝试，所以不知道为什么它无法拾取元素。

HTML：

<a id="loadForm" href="">LINK</a>
<div id="FormContainer">
    <!-- CONTENT -->
</div>

JavaScript：

$(document).ready(function () {

    jQuery('#loadForm').on('click', function (e) {
        e.preventDefault();
        document.getElementById('#FormContainer').style.display = 'block';
        document.getElementById('#FormContainer').style.visability = 'visible';  
    })
});

Answer 1

您已经在使用 Jquery，不妨使用：

$(document).ready(function () {

    jQuery('#loadForm').on('click', function (e) {
        e.preventDefault();
        $('#FormContainer').show();
    })
});

Answer 2

从 document.getElementById 的参数中删除前导哈希，因为它不是 ID 的一部分：

document.getElementById('FormContainer')

document.getElementById('#FormContainer') 返回 null 。并且您无法更改 null 的属性 style ，因为 null 是原始值并且没有属性。

或者，由于您已经在使用 jQuery，只需执行以下操作：

$('#FormContainer').toggle(); // toggles visibility