title: if-image-height JavaScript statement
body: <p>I have a grid of several images on my website. Hovering on one of these images will display a label with a name and price. The problem is that some images have a smaller height, and then the label gets too close to the bottom. Now I'm trying to write a JS if-statement in order to decrease the margin-top of that label only <strong>if</strong> the image-height is less than 200px. </p>
  
  <p>This is how my html looks like: </p>
  
  <pre><code>&lt;div class="fw_preview_wrapper"&gt;
  &lt;img src="'.$row['imageURL'].'" alt="" class="fw_featured_image" id="product_image" width="540"&gt;
  &lt;span class="price_tag" id="price_tag"&gt;&lt;span class="actual_price"&gt;€ '.$row['Price'].'&lt;/span&gt;
  </code></pre>
  
  <p>As you can  see, the image URL is variable and comes from a database via php. For the js function, I set <code>id="product_image"</code>.</p>
  
  <p>This is the CSS part:</p>
  
  <pre><code>span.price_tag {
  top: 86%;
  }
  </code></pre>
  
  <p>As you can see above, there is a margin top set to 86%. This very value needs to be changed to "80%" when an image has a height of less than 200px.</p>
  
  <p>and finally, the JS part:</p>
  
  <pre><code>&lt;script&gt;
  var img = document.getElementById('#product_image'); 
  //or however you get a handle to the IMG
  var width = img.clientWidth;
  var height = img.clientHeight;
  
  if(height &lt; 200){
  $("span.price_tag").css('top','80%');
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>It doesn't work. I would appreciate some help. Thanks in advance!</p>