为什么无法在 JavaScript 中读取 null 的属性“样式”？答案

【问题标题】：Why cant read property 'style' of null in JavaScript?为什么无法在 JavaScript 中读取 null 的属性“样式”？
【发布时间】：2013-06-26 15:08:34
【问题描述】：

我一直卡在这个 javascript 错误上！我要做的就是在单击按钮时编辑 CSS 属性的两个值。我不断收到此错误：

未捕获的类型错误：无法读取 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';  
    })
});

【问题讨论】：

# 选择器前缀是用于 jQuery 而不是 getElementById() .. 为什么要使用 getElementById？ - $('#FormContainer').hide()/show()
为什么奇怪地混合了 jquery 而不是 jquery？
也是visibility，而不是visability。
您的getElementById() 中有一个不应该存在的#。
很困惑为什么你从$(...)切换到jQuery('#loadForm')。它们是一样的，你应该选择一个并坚持下去。

标签： javascript html css

【解决方案1】：

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

$(document).ready(function () {

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

【讨论】：

【解决方案2】：

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

document.getElementById('FormContainer')

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

或者你已经在使用 jQuery 了：

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

【讨论】：