jquery - style.display = 'block' not working in javascript on a div - Stack Overflow

admin管理员组

文章数量:1406052

I am trying to Add a DIV which has a image source in it to an HTML. and after i am trying to change the property of above added DIV. But i am not able to do so. The DIV is showing up in the Browser Development tools when checked. The Error i am getting is "Cannot read property 'style' of null". Below is my code. Thanks in advance.

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 is a reference in the html which i got by.

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

I am trying to Add a DIV which has a image source in it to an HTML. and after i am trying to change the property of above added DIV. But i am not able to do so. The DIV is showing up in the Browser Development tools when checked. The Error i am getting is "Cannot read property 'style' of null". Below is my code. Thanks in advance.

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 is a reference in the html which i got by.

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

• javascript
• jquery
• html

Share Improve this question Follow asked Mar 29, 2013 at 1:13 Some Guy ReallySome Guy Really 53922 gold badges1010 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You gave it class='LoadingImage', but not id='LoadingImage' and later attempt to retrieve it with getElementById("LoadingImage"). Just add the id attribute.

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

But if you are already using jQuery, you might as well use it here too.

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

...And could therefore more easily access it by class (assuming this is the only element with the class LoadingImage) if you prefer:

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

document.getElementById gets the element by ID, not class?

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

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

use:

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

If you want a jQuery solution :)

Also, you used a class name instead of the element's ID

本文标签： jquerystyledisplay39block39 not working in javascript on a divStack Overflow