jQuery check if element have specific attribute

Question

I am trying to see if an element have a specific CSS attribute. I am thinking at something like this:

if ( !$(this).attr('font-style', 'italic')) {
alert ("yop")
}
else {
alert ("nope")
}

It does not work. Any tips on this? Thank you!

Answer 1

you can get the font-style element and use == operator to get true/false value:

if($(this).attr('font-style') == 'italic')
{
    alert('yes')
}
else
{
    alert('no')
}

Answer 2

You are trying to get a css style. The css method can get the information

if ( !$(this).css('font-style') == "italic") {
    alert ("yop")
}
else {
    alert ("nope")
}

Answer 3

You want this:

if ( !$(this).attr('font-style') ==  'italic') {
  alert ("yop")
}
else {
  alert ("nope")
}

Answer 4

Here's a simple plugin to do that (tested):

$.fn.hasCss = function(prop, val) {
    return $(this).css(prop.toLowerCase()) == val.toLowerCase();
}

$(document).ready(function() {
    alert($("a").hasCss("Font-Style", "Italic"));
});

<a style="fonT-sTyle:ItAlIc">Test</a>

Answer 5

How about this

 if ($(this).css('font-style', 'italic')) {
    alert ("yes")
    }
    else {
    alert ("nop")
    }

But I'd rather use console.log instead of alert if I were you, use firebug its less annoying and more fun :D

<script>

     $(document).ready(function(){ 
         $('#selectable1 span').live('click', function() { 
            if (!($(this).css("font-style","italic"))){ 
                alert ("yop"); 
              } else { 
                alert ("nope"); 
              } 
         }); 
     }); 

</script> 

I don't see why this shouldn't work..

Answer 6

Try a morf of the conditional and a few semi columns added:

$(document).ready(function()
{
    $('#selectable1 span').live('click', function()
    {
        if ($(this).css('font-style') != "italic")
        {
            alert("yop");
        } 
        else
        {
            alert("nope");
        };
    });
}); 

NOTE: Making assumption regarding the select and subsequent markup based on other comments - would need to see the html to make sure on that.