CODEWITHSUNDEEP
javascriptjqueryhtmlcssstyles
C.B.
C.B.

Reputation: 23

The inlined style added with jquery is empty

I count the listed items and depending on the number of items I add the inline style. However, the inline style shows up empty.

Empty inlined style

var liList = document.getElementById("reports-list").getElementsByTagName("li");
var listCount = liList.length;

if (listCount == 0) {
    $('#download-reports').css({'display': 'none !important'});
    $('#welcome-left').css({'width': '100% !important'});
} else if (listCount >= 1) {
    $('#download-reports').css({'display': 'block !important'});
    $('#welcome-left').css({'width': '65% !important'});
}

Upvotes: 2

Views: 56

Answers (1)

TJBlackman
TJBlackman

Reputation: 2313

Remember that an inline style attribute is just that, an attribute! And jQuery gives us a method to change attributes. So you can do something like this.

$('#div').attr('style','display: none !important;');

JS Fiddle DEMO

However, this wont add to what's already existing in the inline style, it will completely replace it. If the element does not have an inline style tag, this will create it, but if an inline style attribute already exists, this will completely replace it.

Also - this is probably not the best way to do it. What you probably should do is include a class to your css style sheet, and that class has your desired styles. Then just add or remove that class!

.master_hidden {
  display: none !important;
}

$('#div').addClass('master_hidden');
$('#div').removeClass('master_hidden');

Upvotes: 1

Related Questions