Let's say the original height of an image is 200px or lower than 100px. Then I set the 'max-height: 100px' of an image. How would I get its displayed height. I've tried $('img').height(). But is it just returning me a 0 value.
Use window.getComputedStyle ( Firefox, Opera, Safari ) :
example :
<img style="height:100px;max-height:100px;" src="img.gif" id="test">
var img = document.getElementById('test');
var height = window.getComputedStyle(img).height;
console.log(height)
will output 100px
For IE you can use
var height = img.currentStyle.height;
Use simple JavaScript:
var img = document.getElementById('imageid'); // use the id of your image
var height = img.clientHeight;
You need $('img').innerHeight() - Get the current computed height for the first element in the set of matched elements, including padding but not border.
http://api.jquery.com/innerHeight/
$(document).ready(function() {
$("img").load(function() {
alert($(this).height()); // for height
alert($(this).width()); // for width
});
});
Make sure you have jQuery initialized ABOVE this script, as in this case it seems you are trying to use jQuery by the " $ " command.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Put the above code in the head of the document.
in the body, but the image
<body>
<img src="img.jpg" id="new-image" />
</body>
Above is the HTML, the image has an ID of "new-image"
IDs can be selected using jQuery by adding a # before the ID
e.g. "#new-image"
$(document).ready(function(){
// Retrieves computed image height and stores to variable "imgHeight"
var imgHeight = $('#new-image').height();
// Shows current computed/displayed height in development console
console.log(imgHeight);
// If you don't know how to access the development console
// You can also use alert (but you should learn to use the console!)
alert(imgHeight);
}
Make sure to wrap the above code in a script tag.
Related
I have this image : <img style="border-bottom-right-radius:0px;" id="cover_image" src="Daft+Punk+Tron+Legacy.jpg" alt="cover" width="851" /> , I have set the width of the image and the photo automatically keeps aspect ratio and resize both width to 851 and height to a certain value, I want to grab the height value with Javascript but it's not working
So far I have tried this:
$(document).ready(function() {
alert($("#cover_image").height());
});
When I try
$(document).ready(function() {
alert($("#cover_image").width());
});
it works and it shows 851 which is the correct value of the width, but when I use height is returns 0.. can you point me in the right direction please ?
Use onload event of the image:
$("#cover_image").on('load',function(){
if(this.complete) alert($(this).height());
});
clientWidth and clientHeight are DOM properties that show the current in-browser size of the inner dimensions of a DOM element (excluding margin and border). So in the case of an IMG element, this will get the actual dimensions of the visible image.
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
Thanks
AB
I have a problem with geting the real width and height of some img tags which are added dynamically. Here is my code:
var imgcont = $("<img src='' /> ");
imgcont.css("display","none").appendTo("body");`
$("div#lightbox ul").on("click","li", function(){
var source = $(this).children("img").attr("src");
console.log(imgcont.attr("src",source).width());
})`
If I click for the the first time I get the correct values for width and height but if I click a second time I get the values of the previous clicked element. In order to get the correct values I have to click again on the same element.
How can I get the correct values for img width and height on the first click?
$("div#lightbox ul").on("click", "li", function() {
var source = $(this).children("img").attr("src");
imgcont.attr("src", source).load(function() { // after load finish
// get width
console.log( this.width ); // according to #Alnitak comment
});
})
You have to wait until the image has loaded before you can access its dimensions.
Catch the image's onload event to handle that.
imgcont.on('load', function() {
console.alert(this.width);
});
Note the use of this.width if you want to get the actual width property of the image, and not its on-screen dimensions. They may not be the same.
Normally when you have a div created in html. You can check its width with offsetWidth or style.width (if declared). However if the innerHTML is changed such that the width of the div is also change, neither of those functions work (not sure, but they haven't in my cases).
some code:
var div = document.createElement("div");
div.innerHtml = "asdfasdfasdfasdfsdfasdfasdfad";
alert(div.style.width); // this is nothing
alert(div.offsetWidth); // this is 0
How do you get the width of the div above?
I realize this is an old question, but for the many people landing here from google I'll provide it.
This is the way to do it in dojo 1.7+. With the geometry module you can get and set the width of the content (not including padding or border). This ignores box-sizing.
require(['dojo/dom-geometry'], function(domGeom) {
var myDivNode = dojo.query('div')[0];
var contentBox = domGeom.getContentBox(myDivNode);
alert(contentBox.w);
// This is how to set width/height
domGeom.setContentSize(myDivNode, {w: 100, h: 100});
});
Source: https://dojotoolkit.org/reference-guide/1.7/dojo/contentBox.html
you can't get width value of element that wasn't appended to document.
so you should append it to page, than you can get width,
here is a working demo
How to get them by using JS and jQuery?
I know $(window).innerWidth() can get. But I don't hope it contains the width or height of the scroll bar.
Thank you!
From the jQuery website:
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
If you add overflow:hidden to the body of this page (so there's no scrollbar), then run $(window).width() in a JS console, notice this value increases!
i Have found the best way is with Javascript.
<script type="text/javascript">
var height = document.body.offsetHeight;
var width = document.body.offsetWidth;
//code goes here
</script>
Bear in mind that when you use these, they return an integer so if you are going to use them to apply a style to another object or element then you will have to append them as so:
var newHeight=height + 'px';
var newWidth=width + 'px';
I have an image in a page that I am trying to get the width of.
<img class="zoomerIcon" src="zoomer.png" />
So I'm trying to get the width like this.
var imageWidth = $('.zoomerIcon').width();
However the value is 0 unless I set the width property in the tag.
Does width() only return a width greater than 0 if it's manually set in the property? You can see the whole script here.
http://www.wantedcreative.com/development/zoomer/index.html
Thanks
Update
Sorry, I should have looked at your source first. Here is how you need to change your code. The important thing to realize, is you can't get the width until the image has fully loaded. That is why I use a load event callback to retrieve the widths:
// Create the img element, add a load handler, then append it to the body
var $img = $('<img class="zoomIcon" alt="zoom icon" />').load(function(e){
// get icon image properties for use with animation
var imageWidth = $(this).width();
var imageHeight = $(this).height();
// ... any code that uses these variables needs to go in here ...
}).attr('src', zoomImage).appendTo( document.body );
Original Answer: This is general information.
You are probably putting this code in document.ready which will try to retrieve the width before the image has loaded. Try this instead:
$(window).load(function(){
var imageWidth = $(".zoomer").width();
alert( imageWidth ); // Should be correct
});