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!
-
1+1 due to the answer it recieved :)Mark Schultheiss– Mark Schultheiss2010-02-25 12:41:20 +00:00Commented Feb 25, 2010 at 12:41
Add a comment
|
6 Answers
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>
5 Comments
Mark Schultheiss
I do see the merit of this approach :) +1 for that.
Mircea
Your code works. I went like this and do a small modification: <script> $(document).ready(function(){ $('#selectable1 span').live('click', function() { $.fn.hasCss = function(prop, val) { return $(this).css(prop) == val; } if ($(this).hasCss("font-style", "italic")) { alert ("yes") } else { alert ("nop") } }); }); </script>
Mark Schultheiss
@Mircea - out of curiosity, I pasted your code change in my edit tool - and wondered if this might be better $(document).ready(function() { $.fn.hasCss = function(prop, val) { return $(this).css(prop) == val; }; $('#selectable1 span').live('click', function() { if ($(this).hasCss("font-style", "italic")) { alert("yes"); } else { alert("nop"); } }); }); allows reuse of plug-in outside the live
Mark Schultheiss
@karim79 - would not toLowerCase be better as toUpperCase?
Mircea
@Mark - I've tested your code changes and it works fine. Allowing the reuse of the plugin outside the live is a plus. Thanx
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")
}
1 Comment
Mircea
Looks good but it does not work on my code. The italic is added dynamically but I am using live and it should work... <script> $(document).ready(function(){ $('#selectable1 span').live('click', function() { if ( !$(this).css('font-style') == "italic") { alert ("yop") } else { alert ("nope") } }); }); </script>
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')
}
Comments
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..
1 Comment
Mircea
thanx, The code looks good but for some reason does not work for me. i am looking into this indeed the alert noise makes me bleed...
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.
answered Feb 25, 2010 at 12:37
Mark Schultheiss
34.3k13 gold badges75 silver badges116 bronze badges
Comments
You want this:
if ( $(this).attr('font-style') != 'italic') {
alert ("yop")
}
else {
alert ("nope")
}
