I try
console.log(document.getElementById('content').style.height);
prints nothing, just an empty line in console.
console.log(document.getElementById('content').clientHeight);
prints the height.
document.getElementById('content').style.height = '50px';
has no effect. I am in lastest chrome browser. I want to be able to read and set height, however set does not work. I want to use vanilla js. Any ideas?
Demo:http://jsfiddle.net/YTmNz/
JS:
function ChangeHeight(){
var e1 = document.getElementById("content");
e1.style.height = "400px";
}
setTimeout(ChangeHeight, 2000);
Unfortunately you cannot retrieve height with .style.heightunless you have already set that property before.
You can use jQuery to retrieve .height()
This is just a guess, but depending on what element content is you may also need to add display:block; to allow it to be given a height.
try to use
document.getElementById('content').offsetHeight
document.getElementById('content').offsetWidth
it will give the height/width of element;
Related
I am new to jquery and am currently trying to set a variable equal to the height of some div with id="thing" before animating another div with class=".init_leftbar" by the same quantity.
var iHeight = $("#thing").height();
$(".init_leftbar").animate({top: iHeight + "px"});
However, this does not seem to be working.
if I just set "iHeight" equal to some number it will animate however.
I figured there has been some misunderstanding on my part as to how the "height()" method works.
Any help is greatly appreciated.
I would try to print $("#thing").height() in the browser console with
console.log($("#thing").height());
to see what is returning from the div.
I also noticed that .height() has some problems with absolute positioned divs given a display:block; style.
As documented in the Jquery API:
http://api.jquery.com/height/
// Returns height of browser viewport
$( window ).height();
// Returns height of HTML document
$( document ).height();
Consider running the script on document ready, allowing everything else to load first.
Also, you might get better mileage with outerheight(), which accounts for everything which can make up the height, including padding.
What about replacing:
$("#thing").height();
with:
$('#thing').css("height");
Be aware that css() returns string as "100px" and not 100 as height()
so you need to delete the '+ "px"' suffix.
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.
I have a div element, that has no defined width or height. It holds other elements, and molds on their size.
I need to get the final size of the div, without being able to check the sizes of the elements inside of it (dynamic elements).
I tried parsing all the properties of the object, but found nothing, all were "undefined".
Any thoughts?
Many thanks
Later edit:
I have
<div id="xxx" style="position:relative;">
aaaa
</div>
I tried:
var a = mydiv.style.width;
But it did not work.
I also tried:
var getKeys = function (obj) {
var keys = [];
for(var key in obj){
document.write(key+"="+obj.key+"<br>");
}
return keys;
}
getKeys(mydiv.style);
To show all the properties, but none had any info.
The jQuery solution works perfectly, but getComputedStyle was what I was looking for, as I can't use jquery here.
Sorry for the short information.
Based on no information whatsoever about what you were doing, I'd suggest that you should (if possible) use the window.getComputedStyle() approach, which finds the properties of an object as rendered by the browser:
var elem = document.getElementById('elemId'),
properties = window.getComputedStyle(elem, null),
height = properties.height,
width = properties.width;
If you have jQuery available, then you can simply use the width() and height() (or outerWidth()/outerHeight()) methods:
var height = $('#elem').height(),
width = $('#elem').width();
You don't give a whole lot of information. I'd suggest you edit your post with the actual code you tried using.
However, with JQuery:
$(DOMElement).width() //-- Element width.
$(DOMElement).innerWidth() //-- Element width + padding.
$(DOMElement).outerWidth() //-- Element width + padding & border.
$(DOMElement).outerWidth(true) //-- Element width + padding, border, and margin.
$('div').width() will return the width...
I am trying to receive the original CSS width value of an object using JavaScript. However, if I use:
var originalWidth = document.getElementById(<idOfObject>).style.width;
It always returns blank. I've also noticed that any property I access using this syntax will return blank. I know for sure that the given element exists, since
alert(document.getElementById(<idOfObject>));
does shows me the right object.
Can anyone help me to solve this problem?
You probably try to get the value which was set in stylesheet, not directly like this:
document.getElementById(<idOfObject>).style.width = '100px';
If you want to get the width of the element you can use innerWidth property:
var width = document.getElementById(<idOfObject>).offsetWidth;
None of the previous answers were right.
The property you are looking for is clientWidth, but not in "style"
document.getElementById('idOfObject').clientWidth;
That will work both on "width" set with external css, style seccion or even inline style="width:80px"
General note: don't use <div width="500"> as it has no effect
The mentioned offsetWidth is the second best choice, but it does not return the exact width set in css, but that width plus border width
Other options like innerWidth that works with window object didn't work for me on divs.
This bizarre issue of realizing style.width not working properly, wasted 2 hours of my precious time :-), hope this answer shorts that time for anyone else in the future.
<div style="width:10%" id="mydiv" >
OR
<div style="width:10px" id="mydiv" >
var mydiv = document.getElementById("mydiv");
var curr_width = mydiv.style.width;
alert(curr_width);
This works for me
I tried it and I can get the value
http://jsfiddle.net/xyd95/
Well, unless the width has no unit
http://jsfiddle.net/xyd95/1/
I believe this will work
function getWidth()
{
x = document.getElementById(<idOfObject>)
return x.offsetWidth;
}
Is there a way to get the height of a dynamicly inserted/created div that initially has display=none, before showing it?
Dont display:none it..... Just append it to an absolutely positioned element offset by -9999px or so. Alternatively use visibility:hidden.
Typcially you hide it by positioning it outside the viewable area of a container with overflow: hidden;.
Since its height might be affected by the actual placement in the DOM, it is quite difficult to give an accurate answer.
Only form you can reliable tell is to use display:block and visibility:hidden. But keep in mind that it will take up the space even before showing it.
The method to use in this case is the .height()
visibility:hidden;
position:absolute;
hidden to make invisible, absolute to take out of the document flow.
this still renders the content and assigns height which display:none doesn't do.
if the height is set in css then i think all you should have to do is $('#elemID').css('height').
I believe when an element has display: none; it doesn't have any height. One option would be to use visibilty:hidden instead then use
$('elem').height()
I don't think the browser will actually render the DOM while a script is running, at least not in my experience.
I've always added the element in it's final position, measured it and then hidden it.
I've never noticed it flashing into existence momentarily. I'd be interested to know what others think.
Something like:
jQuery
var el = $('<div/>', {
html: 'hello',
css: {
padding: '10px'
}
});
var height = el.appendTo( $(document.body) ).height();
el.hide();
Plain
var el = document.createElement( 'div' );
el.style.padding = '10px';
el.innerHTML = 'hello';
document.body.appendChild( el );
var height = el.clientHeight;
el.style.display = 'none';