Is there a way to change Style via jQuery

Question

There's an error message that I want to hide on some scenarios:

<div id="PickerPopupNoResultsMessage" style="color:red; font-weight: bold; " class="ui-helper-hidden">
    Please select Name first.
</div>

It renders when I do this in the view:

 $('#PickerPopupNoResultsMessage').removeClass('ui-helper-hidden');

so it becomes

<div id="PickerPopupNoResultsMessage" class="" style="color: red; font-weight: bold; display: none;">
    Please select Name first.
</div>

I am unable to remove display: none. I also tried removeClass and addClass. In addClass I am setting display: block and all it does is add the class, but display: none still stays.

Please help as this small thing has taken a lot of my time :(

I already tried that , that's why i asked here.. seriously you'd downvote some just like that — , Sep 16 '14 at 19:03
FYI i didn't down vote. you may try $('#PickerPopupNoResultsMessage').css() to change css — ManirajSS, Sep 16 '14 at 19:05

score 1 · Answer 1 · answered Sep 16 '14 at 19:04

1

Changing a class won't affect in-line styles on the element itself. For that you'd likely need to directly edit its CSS properties. Something like this:

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

answered Sep 16 '14 at 19:04

David

208,112
36
198
279

score 1 · Answer 2 · edited Sep 16 '14 at 19:33

Try any one of these:

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

Or if you want to store state of display property in jquery data cache try This:

$('#PickerPopupNoResultsMessage').show();

Make sure you do it when it's available in the DOM. To do it after the element is loaded in the DOM you may try this:

$(document).ready(function(){

    $('#PickerPopupNoResultsMessage').show();

    // Or This

    $('#PickerPopupNoResultsMessage').css('display', 'block');
});

Any of those will work. You may use inline, inline-block or block when using css method.

score 1 · Answer 3 · edited May 23 '17 at 12:12

1

You can use the JQuery css() function:

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

Or show():

$('#PickerPopupNoResultsMessage').show()

JSFiddle Demo
You can read more about css() at the documentation
Or, more in depth answers can be found at this SO question:
How to change css display none or block property using Jquery?

edited May 23 '17 at 12:12

Community

1
1

answered Sep 16 '14 at 19:04

Jacob G

13,762
3
47
67

score 1 · Answer 4 · answered Sep 16 '14 at 19:10

I would simplify the html/styling.

Currently you have..

<div id="PickerPopupNoResultsMessage" style="color:red; font-weight: bold; " class="ui-helper-hidden">
Please select Name first.
</div>

Loose the class and adjust your style to..

<div id="PickerPopupNoResultsMessage" style="color:red; font-weight: bold; display: none;" >
Please select Name first.
</div>

Then your jQuery can be adjusted to..

$('#PickerPopupNoResultsMessage').css( "display", "block" )

Is there a way to change Style via jQuery

4 Answers4