Obtain element width & height when I didn't set it - javascript

I have a HTML element but I have not defined the width or height (or sometimes I may not have defined the right or bottom, but I did define the width & height) in CSS.
Do you know how I can use JavaScript to obtain either an elements width or height or right or bottom if I haven't set it?
#blockMenu { z-index: 0; padding: 10%; }
If I do the following, I know it wont work because I didn't set the width or right:
var width = document.getElementById("blockMenu").offsetRight - document.getElementById("blockMenu").offsetLeft;
Is there anyway to determine the dimensions & position of a element when I haven't set it?
If not what if I define the width; how do I obtain the elements width through JavaScript?

With JavaScript you can do
document.getElementById("blockMenu").clientWidth;
document.getElementById("blockMenu").clientHeight;
With jQuery you can do
$('#blockMenu').width();
$('#blockMenu').height();
Check working example at http://jsfiddle.net/7jteV/2/

if you have the option to use jquery, you can use the height() and width() methods.

You can use jQuery as well
$("blockMenu").width()
$("blockMenu").height()
http://api.jquery.com/width/
http://api.jquery.com/height/

document.getElementById("blockMenu").style.width
document.getElementById("blockMenu").style.height
Should do the trick

Related

Jquery detect if no width is set on an element [duplicate]

I have a stylesheet which defines default width for images. When I read the image width style with jQuery width() it returns the right width. It also returns the same width when I call css("width"). But if there is no width defined in the stylesheet the function css("width") will also return the computed width() value but won't say undefined or auto or something like that.
Any ideas how I could find out if style is or is not defined in the CSS code?
Solution works for me cross browser. Thanks to everyone for helping:
$(this).addClass("default_width_check");
var width = ($(this).width() == 12345) ? 'none-defined' : $(this).width();
var height = ($(this).height() == 12345) ? 'none-defined' : $(this).height();
$(this).removeClass("default_width_check");
.default_width_check {
width: 12345;
}
I have a workaround idea that might work.
Define a class named default_width before all other style sheets:
.default_width { width: 1787px }
/* An arbitrary value unlikely to be an image's width, but not too large
in case the browser reserves memory for it */
to find out whether an image has a width set:
Clone it in jQuery: element = $("#img").clone()
give the cloned element the default_width class: element.addClass("default_width")
If its width is 1787px, it has no width set - or, of course, is natively 1787px wide, which is the only case in which this method will not work.
I'm not entirely sure whether this will work, but it might. Edit: As #bobince points out in the comments, you will need to insert the element into the DOM for all classes to be applied correctly, in order to make a correct width calculation.
No, the getComputedStyle() method on which jQuery's css() function depends cannot distinguish between an width computed from auto vs explicit widths. You can't tell if there was something set in the stylesheet, only from direct inline style="width: ..." (which is reflected in the element's .style.width property).
currentStyle works differently and will give you auto, however this is a non-standard IE extension.
If you really wanted to work it out, you could iterate over document.styleSheets, reading each of their declarations, getting the selector out and querying it to see whether your target element matched, then seeing if it contains a width rule. This would, however, be slow and not at all fun, especially as IE's styleSheet DOM differs from the other browsers. (And it still wouldn't cope with pseudo-elements and pseudo-classes, like :hover.)
You can use image.style.width (image should be your element). This returns an empty string if it's not defined in CSS.
You can check the element's style.cssText if the width is defined;
<img id="pic" style="width:20px;" src="http://sstatic.net/ads/img/careers-ad-header-so.png" />
var pic = document.getElementById('pic');
alert(pic.style.cssText);
​But please note of the following styles
border-width: 10px;
width: 10px;
you should only match the width not the border-width.

How to get height in AngularJS like in JQuery?

I have this jquery snippet below:
$(document).ready(function() {
var height = Math.max($("#one").height(), $("#two").height());
$("#one").height(height);
$("#two").height(height);
});
I want to convert that to AngularJS, but I've been having an issue on actually getting the height. I've tried many different things including offsetHeight and scrollHeight and they all return 0. Is that because I'm using a table? I'm not sure how to do it / if I'm doing it right. Here's kind of an outline of what I've been trying to do so far:
$scope.height = function()
{
var height = window.Math.max(HEIGHT OF MY ELEMENT "firstTable", HEIGHT OF MY ELEMENT "secondTable");
//Now get the height and set it.
};
I'm not sure if I should make this into a directive and put it in my table (where I can access $element) or what.
Thanks in advance
What you're looking for isn't to use AngularJS to get height, but rather use native JavaScript.
Use document.getElementById() to select your element then use .offsetHeight to get the height and finally .style.height to set your height.
Your code would look a little like this:
var elementOne = document.getElementById("one"),
elementTwo = document.getElementById("two"),
height = Math.max(elementOne.offsetHeight, elementTwo.offsetHeight);
elementOne.style.height = height;
elementTwo.style.height = height;
Note that I created variables for each element to avoid repeatedly retrieving the element via document.getElementById() for getting and setting the height.
I would recommand using plain old javascript to do so.
Looks like this works well :
document.getElementById('someDiv').clientHeight;
// clientHeight includes the height and vertical padding.
document.getElementById('someDiv').offsetHeight;
// offsetHeight includes the height, vertical padding, and vertical borders.
document.getElementById('someDiv').scrollHeight;
// scrollHeight includes the height of the contained document (would be greater than just height in case of scrolling), vertical padding, and vertical borders.
Found solution on Stackoverflow : CSS / JavaScript - How do you get the rendered height of an element? so I do not have any merit ;).
jqLite (which is included in Angular) is limited and doesn't offer a function to calculate the height.
Your best options here is to inject the element into controller,
and get the height via:
element[0].offsetHeight;
Demo on plnkr: http://plnkr.co/edit/g45SX4unuCNwlVIUEw4j?p=preview

can not get the width of the html element

I create an element using js,and I have imported the related css,however I can not get the width of the element,this is the code:
css:
#mainDiv{
position:absolute;
width:500px;
height:500px;
}
js:
var mainDiv=document.createElement("div");
mainDiv.setAttribute("id","mainDiv");
document.body.appendChild(mainDiv);
//now I want to get the width of the 'mainDiv'
var wd=mainDiv.style.width;
console.info(wd);
However the value of the 'wd' is always ''.
I wonder why?
Using the firebug,I found that the width of the 'mainDiv' is 500px.
But why I can not get the value in the js?
I do not want to set the width and height of the 'mainDiv' in the js like:
mainDiv.style.width='500px';
I want to set the size in the css.
Any idea?
try
var wd=mainDiv.clientWidth;
Use mainDiv.offsetWidth .
Hope this helps.
Listen, this is an awful answer, but just use jQuery.
If you did this would be as simple as:
var width = $('#mainDiv').width(); // width has the value 500
Docs: http://api.jquery.com/width/
In order to get the actual width of a DOM element you must use offsetWidth.
From W3Schools:
offsetWidth: Returns the width of an element, including borders and padding if any, but not margins
This example should work:
var mainDiv=document.createElement("div");
mainDiv.setAttribute("id","mainDiv");
document.body.appendChild(mainDiv);
var wd=mainDiv.offsetWidth;
console.info(wd);
It's because the element is not yet rendered. I know it's awful, but you should delay reading the width a bit:
var mainDiv=document.createElement("div");
mainDiv.setAttribute("id","mainDiv");
document.body.appendChild(mainDiv);
setTimeout(100, function() {
console.info(mainDiv.style.width);
});
You cannot get the width because you are trying to get it from the style. Sorry went into train, basically because you are not setting the style element but rather defining a class - JavaScript can't read the value from the element.

jQuery/Javascript css("width") / check if style is defined in css?

I have a stylesheet which defines default width for images. When I read the image width style with jQuery width() it returns the right width. It also returns the same width when I call css("width"). But if there is no width defined in the stylesheet the function css("width") will also return the computed width() value but won't say undefined or auto or something like that.
Any ideas how I could find out if style is or is not defined in the CSS code?
Solution works for me cross browser. Thanks to everyone for helping:
$(this).addClass("default_width_check");
var width = ($(this).width() == 12345) ? 'none-defined' : $(this).width();
var height = ($(this).height() == 12345) ? 'none-defined' : $(this).height();
$(this).removeClass("default_width_check");
.default_width_check {
width: 12345;
}
I have a workaround idea that might work.
Define a class named default_width before all other style sheets:
.default_width { width: 1787px }
/* An arbitrary value unlikely to be an image's width, but not too large
in case the browser reserves memory for it */
to find out whether an image has a width set:
Clone it in jQuery: element = $("#img").clone()
give the cloned element the default_width class: element.addClass("default_width")
If its width is 1787px, it has no width set - or, of course, is natively 1787px wide, which is the only case in which this method will not work.
I'm not entirely sure whether this will work, but it might. Edit: As #bobince points out in the comments, you will need to insert the element into the DOM for all classes to be applied correctly, in order to make a correct width calculation.
No, the getComputedStyle() method on which jQuery's css() function depends cannot distinguish between an width computed from auto vs explicit widths. You can't tell if there was something set in the stylesheet, only from direct inline style="width: ..." (which is reflected in the element's .style.width property).
currentStyle works differently and will give you auto, however this is a non-standard IE extension.
If you really wanted to work it out, you could iterate over document.styleSheets, reading each of their declarations, getting the selector out and querying it to see whether your target element matched, then seeing if it contains a width rule. This would, however, be slow and not at all fun, especially as IE's styleSheet DOM differs from the other browsers. (And it still wouldn't cope with pseudo-elements and pseudo-classes, like :hover.)
You can use image.style.width (image should be your element). This returns an empty string if it's not defined in CSS.
You can check the element's style.cssText if the width is defined;
<img id="pic" style="width:20px;" src="http://sstatic.net/ads/img/careers-ad-header-so.png" />
var pic = document.getElementById('pic');
alert(pic.style.cssText);
​But please note of the following styles
border-width: 10px;
width: 10px;
you should only match the width not the border-width.

Get the size in 'px' instead of percents

I have to write a javascript function that is returning the current size (in px) of a div. Unfortunately the div has its weight specified in % instead of px.
The style of the div: position: absolute; width: 100%; height: 100%;
And my width returning function:
function getTableWidth(tableId){
var tabWidth = document.getElementById('pt1::tabb').children[0].children[0].style.width;
return tabWidth;
}
tabWidth is '100%'.
Is it possible to return the px width instead of the % width ?
NOTE: I don't have access to any html/css , as the page I am working on is generated through a complex framework. I can only embed javascript.
Each browser is different. In most you can use the clientWidth and clientHeight properties of the DOM element. In non-IE browsers you can use document.defaultView.getComputedStyle(). However I'd recommend using a framework that takes care of cross-browser issues for you. In jQuery, you can get the current width in pixels using something as simple as $(element).width().
node.offsetWidth
should do the trick (in all browsers!)

Categories