检索内联CSS样式值

Question

I have a div that is styled automatically by a template based on variable results pulled from another data source. The style value is set inline, like this:

<div class="view-empty message" style="display: block;">
    There are no active Invoices to display.
</div>

I've been able to see this in the DOM and toggle visibility back and forth, but so far have been unable to use Jquery to retrieve the style value. What I want to do is search for the div based on the class (since the "view-empty message" class is unique) and return the value of the style attribute. So in this case I would like to return either "display: block" or "block" . I've tried many different methods (such as .attr() and css. that I've seen around online ) and so far none have returned what I'm looking for. This is the latest one I'm using:

var displayValue = document.getElementsByClassName($(".view-empty message"))[0].style;

Any ideas? I appreciate the help.

Answer 1

Oh sh*t. Lightbulb. Your selector is wrong. Change:

$('.view-empty message').attr('style');

to

$('.view-empty.message').attr('style');

In your selector you're trying to get .view-empty message which looks for an HTML element named message inside of a container with a class of .view-empty . Instead, you need to specify a selector for an element that has TWO CLASSES $('.view-empty.message');

;]

---

-- Helpful but irrelevant now... --

You need to specify which attribute you are attempting to get the value for. Notice how I'm specifying the 'style' attribute in the .attr() method. This will retrieve the value of that attribute.

$('.view-empty.message').attr('style');

Per the documentation for the .attr() method, there isn't actually a method that takes no parameters. http://api.jquery.com/attr/ .

When you invoke the method with one value, it returns the value of the attribute.

<div class='foo'></div>

$('.foo').attr('class'); // returns "foo"

When you invoke the method with two values, it sets an attribute on the element with the name of the first argument and a value equal to the second argument.

<div class='foo'></div>

$('.foo').attr('style', 'display: none;');

<div class='foo' style='display: none;'></div>

Answer 2

perhaps try $(".view-empty message").css('display') ? you can also set the display property with $(".view-empty message").css('display', 'none').

I assume you are not using the style='display:none' as a flag/state variable of some sort. if you are, maybe try putting the display property in a class and use jquery's .addClass() and .removeClass() ?