Using jQuery to detect if element has a certain style attribute

Question

I'm writing a script to detect whether or not an image is present on a webpage. It's a standard formatting with their html for this section. If there is not an image it looks like

    <div id="photo" style="display: none;">
       <img id="image" src="IMAGESOURCE" onerror="img2txt()" alt="">
    </div>

if there is an image present that same html looks like this

    <div id="photo">
       <img id="image" src="IMAGESOURCE" onerror="img2txt()" alt="">
    </div>

Right now in the script I'm using this, which doesn't work (or i wouldn't be here :D )

  var images = ($('#photo[style*="display: none"]').length === 0 ? false : true);

    if (images) {
      $('#yes[value="Yes"]').click();
    }
    else {
      $('#no[value="No"]').click();
    }

(The clicks are for the radio buttons on the form that I am filling out based on this image query)

As of right now the if/else statement is giving the radio "No" a click on a page where it should be a yes. I've tried using

    if (!images) {
      $('#yes[value="Yes"]').click();
    }
    else {
      $('#no[value="No"]').click();
    }

just to see if my boolean was incorrect. But with that adjustment it just does the opposite again. Any help is much appreciated. Thanks

You should drop the attribute selectors..

elad.chen
– elad.chen

2016-02-19 00:28:07 +00:00
Commented Feb 19, 2016 at 0:28 — elad.chen
– elad.chen, Commented Feb 19, 2016 at 0:28
$('#yes').prop('checked', $('#image').is(':visible'))

adeneo
– adeneo

2016-02-19 00:30:07 +00:00
Commented Feb 19, 2016 at 0:30 — adeneo
– adeneo, Commented Feb 19, 2016 at 0:30
$('#no').prop('checked', !$('#image').is(':visible'))

adeneo
– adeneo

2016-02-19 00:30:49 +00:00
Commented Feb 19, 2016 at 0:30 — adeneo
– adeneo, Commented Feb 19, 2016 at 0:30

Travis J · Accepted Answer · 2016-02-19 00:29:13Z

1

So it is always display:none when not present? jQuery has a specific selector for that :visible.

var present = $("#photo").is(":visible");

answered Feb 19, 2016 at 0:29

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DjH Over a year ago

It is always display:none when not present... that line of code isn't working for this though...

David Thomas · Accepted Answer · 2016-02-19 00:35:07Z

1

To find out whether the image is visible or not:

$('#image:visible').length;

With reference to your own posted code, you could use:

var imageVisible = $('#image:visible').length,
    toClick = imageVisible ? 'yes' : 'no';

$('#' + toClick + '[value=' + toClick + ']').click();

Or, avoiding the unnecessary attribute-selectors (given that an id is a unique identifier:

$('#' + toClick).click();

References:

:visible.

edited Feb 19, 2016 at 0:35

answered Feb 19, 2016 at 0:29

David Thomas

254k53 gold badges382 silver badges421 bronze badges

4 Comments

DjH Over a year ago

I'm not sure why but this isn't working. Also, the id's are actually the same for the yes/no radio buttons (i wrote the html from memory, oops), so the attribute selectors need to stay. But I would think the first suggestions would work... no luck though

David Thomas Over a year ago

In what way is it not working? Where does it fail? And if the id of two separate elements are the same then your JavaScript will break, that's invalid HTML.

DjH Over a year ago

It's acting the same as before, either Yes for every page or No for every page depending on how I write the if statement if (!images) vs if (images) . Also, I went and double checked again, but the id's for the radio button inputs are the same... I did not write the html for that.

David Thomas Over a year ago

Then you'll need to post your HTML for us to help.

Collectives™ on Stack Overflow

Using jQuery to detect if element has a certain style attribute

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related