style.display ='block'無法在div上使用javascript

Question

我正在嘗試將包含圖像源的DIV添加到HTML中。 在我試圖改變上面添加的DIV的屬性之后。 但我無法這樣做。 選中后，DIV將顯示在瀏覽器開發工具中。 我得到的錯誤是“無法讀取null的屬性'樣式”。 以下是我的代碼。 提前致謝。

ajaxLoaddiv='<div class="LoadingImage" alt="example" style="display: none"> <img src="css/ajax-loader.gif"></div>';
$(ajaxLoaddiv).appendTo(attachPoint);
document.getElementById("LoadingImage").style.display = 'block'; 

attachpoint是我得到的html中的引用。

var attachpoint=document.querySelector('.buttonAttachPoint');

Answer 1

你給它class='LoadingImage' ，但不是id='LoadingImage' ，后來嘗試用getElementById("LoadingImage")檢索它。 只需添加id屬性即可。

ajaxLoaddiv='<div id="LoadingImage" class="LoadingImage" alt="example" style="display: none"> <img src="css/ajax-loader.gif"></div>';
//--------------^^^^^^^^^^^^^^^^^^^

但是如果你已經在使用jQuery，那么你也可以在這里使用它。

$('#LoadingImage').css('display', 'block');

...因此，如果您願意，可以更容易地通過類訪問它（假設這是具有類LoadingImage的唯一元素）：

$('.LoadingImage').css('display', 'block');

Answer 2

document.getElementById按ID獲取元素，而不是類？

var ajaxLoaddiv = $('<div />', {'class': 'LoadingImage',
                                 alt   : 'example',
                                 style : 'display: none'
                                }),
    img = $('<img />', {src: 'css/ajax-loader.gif'});

ajaxLoaddiv.append(img).appendTo(attachPoint);
ajaxLoaddiv.show();

Answer 3

采用：

$("#LoadingImage").css({"display": "block"});

如果你想要一個jQuery解決方案:)

此外，您使用了類名而不是元素的ID