How can I get an elements width without setting it's width property in CSS? If I set the width it works, but if I don't the width is just 0 even though I can see it's not after inspecting with debugger.
let width = this.htmlElement.clientWidth;
HTML
<label [model]="foobar">0</label>
Use offsetWidth instead
let width = this.htmlElement.offsetWidth;
The first line in the docs for clientWidth is
The Element.clientWidth property is zero for elements with no CSS or
inline layout boxes, otherwise it's the inner width of an element in
pixels
The offsetWidth on the other hand is a read-only property that returns the layout width of an element, regardless of wether or not the element is styled with a given width.
var el = document.getElementById('foobar');
console.log('clientWidth : '+ el.clientWidth );
console.log('offsetWidth : '+ el.offsetWidth );
<label id="foobar">This has width ..................</label>
Related
How can we get height of sidebar in checkout using js
Is there any way to get the sidebar height?
first grab the element
const myEl = document.querySelector("#whatever-your-sidebar-id-is");
then you can either check the height with clientHeight or getBoundingClientRect().height :
myEl.getBoundingClientRect().height
You can get the height with offsetHeight and offsetWidth properties of the element.
elem = document.querySelector('#sidebar-id-or-class')
elem = document.querySelector('.cart-summary')
then check the height with offsetHeight
console.log(elem.offsetHeight)
The function will give you relatively with properties of the DOM element to get its the width and height.
I am using an accordion which was written by somebody else. When the accordion is initially displayed, each rows' initial heights are persisted, and then their heights are set to 0. And then when the row becomes visible, its height is restored to its original value.
But in my case, the accordion's heights will change because I am asynchronously populating them with data. So, when the row becomes visible, I'd like to calculate the rows' height based on it's new constents. However, because its height was set to 0 with .css('height', 0), $(elem).height() gives 0.
Is there a way to calculate the height of the element, rather than just retrieve it's css height value?
Use jQuery's innerHeight function to get the calculated height of an element, sans border and margin.
var height = $('#myElement').innerHeight();
Edit:
Use jQuery's outerHeight function to get the calculated height of an element, including padding, border and optionally the margin.
//without margin
var height = $('#myElement').outerHeight();
//with margin
var height = $('#myElement').outerHeight(true);
Edit 2:
You may also compare these results with native Javascript.
var el = document.getElementById('myElement');
var height = el.offsetHeight;
You can also use the Javascript offsetHeight function.
var elementHeight = document.getElementById(id_attribute_value).offsetHeight;
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
I am creating a generic myWindow extending Ext.window.Window component.
here I need to support one feature to auto adjust height and widht of window.
This height and width will depend on height/width of HTML content inside the Window.
Is there any way in EXT JS or javascrip that can provide me height and width of html content.
To get the height or width of an element in pixels (including padding and borders), use the offsetHeight and offsetWidth properties of the object. These values are readonly.
If you have set the style of the element, you can get the height and width (excluding padding and border) with the style property:
var el = document.getElementById('elementId');
var width = el.style.width;
var height = el.style.height;
You can also set the height or width of the element this way.
el.style.width = 40 + 'px';
'px' can be changed to any valid unit, e.g. em.
Hello i'm trying to change the offsetHeight of an element. i used the following
document.getElementById('id').style.offsetHeight = 0;
but i saw no visible change. Can anyone help me please?
The offsetHeight property indicates the height of the visible area for an element. It's a shorthand that contains the sum of dimensions from padding, scrollbars and borders.
However, it can't be used to change the actual size and as noted in comments, offsetHeight is a property of an element, not style.
To modify the actual size use height, padding or border.
You should set style.height to a string ending in px.
You should set style.height and remember to add the unit at the end like 'px' , in the case you get it from offsetHeightfor example (well you know what unit you need). It's style and you have all the different units ('px','%','em', 'vh', ...etc).
Here is an example:
myHeightInPx = 200;
DomElement.style.height = myHeightInPx + 'px';
Also to note is that offsetHeight return the height as a number, an integer. The unit is px. And if you get a value using it. you need always to add the unit 'px' when setting style.height, just like in above and the bellow example:
DomElement.style.height = AnotherDOMelment.offsetHeight() + 'px';
In JavaScript what's the right way to set the scrollHeight of one element to that of another element? Direct assignment has no effect.
Thanks, Greg
It's not possible directly. The scrollHeight is a read only property that contain the total height of element content in pixels.
If have element A and you want to have element B with the same scrollHeight as element A, make it so that element B has a single child DIV element (move all previous element B content as child nodes of the DIV) that is set to:
width : 100%;
overflow : hidden;
and using javascript set the height of DIV to scrollHeight of element A (in pixels):
document.getElementById('B').childNodes.item(0).style.height = document.getElementById('A').scrollHeight + 'px';