无法读取 null 的属性“样式”答案

【问题标题】：Cannot read property 'style' of null无法读取 null 的属性“样式”
【发布时间】：2013-08-26 10:11:15
【问题描述】：

您好，我试图在页面加载时隐藏 div，并在选中/取消选中复选框时显示/隐藏它。这是我的代码：

<asp:CheckBox ID="cb1" runat="server" Text="CB" />

<div runat="server" id="div1" style="display:none">
</div>

这里是javascript：

window.onload = function () {
    $('#cb1').change(function () {
        display('div1');
    })
}

function display(id) {
    var traget = document.getElementById(id);
    if (traget.style.display == "none") {
        traget.style.display = "block";
    } else {
        traget.style.display = "none";
    }
}

我得到的错误是这样的：

Uncaught TypeError: Cannot read property 'style' of null

这是我的代码的最后一个版本。我已经尝试过类似的东西：

document.getElementById('div1').style.display="block";
$('#div1').hide();

...和许多其他选项。

结果是一样的。请帮忙

【问题讨论】：

标签： javascript jquery asp.net

【解决方案1】：

你正在使用runat="server"所以试试这个

<%= div1.ClientID %>

获取 div 的 ID，然后你可以像这样调用你的函数

display('<%= div1.ClientID %>');

或在标记中使用clientidmode="static"

<div runat="server" id="div1" style="display:none" clientidmode="static">
</div>

【讨论】：

其实这里一定要放：display('<%= div1.ClientID %>'); 基于用户代码和功能
感谢@Aristos 我错过了那个函数调用。修改了帖子:)
好的，我这样做了，错误消失了，但现在代码什么也不做。它不显示/隐藏 div。页面没有其他错误
@Gesh 按预期工作，确保您的函数正在调用。因为您还使用 runat="server" 作为您的复选框 jsfiddle.net/7bcxy
检查您的开发者工具，如果您使用的是 chrome，那么您可以执行 Ctrl+Shift+I > Source 并检查文件中的错误。如果您使用的是 IE，那么您可以按 F12 并检查源代码。如果您使用的是其他浏览器，那么您可以尝试使用 firebug。

【解决方案2】：

function display(id) {
    if ($('#'+id).css('display') === 'none') {
        $('#'+id).show();
    } else {
        $('#'+id).hide();
    }
}

【讨论】：

我试过了，没有错误，但现在代码什么都不做。它不显示/隐藏 div 并且页面上没有其他错误
那么确定你的“id”吗？
你使用的 jquery 版本是什么？你试过这个吗？ $('#cb1').on('change',function () { display('div1'); })

【解决方案3】：

试试这个

window.onload = function () {
    $('#<%= cb1.ClientID %>').change(function () {
        display('<%= div1.ClientID %>');
    })
}

function display(id) {
   $('#'+id).toggle();
}

【讨论】：