无法读取属性'style'的null

时间:2013-08-26 10:11:16

标签: javascript jquery asp.net

您好我正在尝试在页面加载时隐藏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();

......以及许多其他选择。

结果是一样的。请帮忙

3 个答案:

答案 0 :(得分:4)

您正在使用runat="server",请尝试使用此

<%= div1.ClientID %> 

获取div的ID,然后你可以像这样称呼你的功能

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

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

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

答案 1 :(得分:1)

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

答案 2 :(得分:1)

试试这个

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

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