Develop Reference

How to get full height (including margins) with window.getComputedStyle()?

I am trying to get the full height of a JSX element in ReactJS using window.getComputedStyle, however I'd like to get the full value, height+margin, but I couldn't find a way.
When I use only height I don't get the margin value.
window.getComputedStyle(productsContainerRef.current).height
I know I can get both values separetely and sum them, but is there a straightforward way to do that?
I am getting the element using a ref, so, it wouldn't be possible to use the event to aim the target element and get outerHeight.
Is there a way to do that using getComputedStyle?

One option is to add the margins to the refs current height.
Example:
const outerHeight = (el) => {
var height = el.offsetHeight;
var style = window.getComputedStyle(el);
height += parseInt(style.marginTop) + parseInt(style.marginBottom);
return height;
};

Modify CSS classes using Javascript

I was wondering if there is an easy way to change the CSS classes in JavaScript.
I have gone through all other similar questions here and I couldn't find an straight-forward and simple solution.
what I'm trying to do is to set the width and height of a <div> to match an image that I have on my site (upon loading). I already know the picture dimensions and I can set my CSS to that - but I want my script to figure this out on its own.
After hours of r&d (I'm a beginner), this is what I came up with:
var myImg = new Image();
myImg.src = "img/default.jpg";
myImg.onload = function(){
var imgWidth = this.width;
var imgHeight = this.height;
document.getElementById("myBg").setAttribute('style', "height :"+ imgHeight + "px");
document.getElementById("myBg").setAttribute('style', "width :"+ imgWidth + "px");
};
However, this only sets the width of the element with id "myBg". If I reverse the order of the height and width, then it only sets the height to the image's height.
It seems like first it sets the height of the element to the image height but right after it moves to the next statement to set the width, the height value goes back to what it what defined originally in css.
I did further research online and seems like changing the css (inserting new attributes, removing, etc.) using JavaScript is not an easy task. It is done through
document.styleSheets[i].cssRules[i] or document.styleSheets[i].addRule
type of commands, but all the tutorials online and here on stackoverflow were confusing and complicated.
I was wondering if anyone familiar with document.styleSheets can explain this to me simply?
Imagine I have this class in my separate css file:
.container
{
height: 600px;
width: 500px;
}
I want the height and width to change to the dimension of the picture upon loading. How do I do this?
I don't want to define a new "style" element in my html file, I want to change the css file.
I'm not supposed to know the image dimension before it loads to the page.
no jquery please, I want to do this using only standard JavaScript.
Thank you.

The reason only one or the other works is because in your second line of code, you destroy the whole style attribute, and recreate it. Note that setAttribute() overwrites the whole attribute.
A better solution would be to use the element.style property, not the attribute;
var bg = document.getElementById("myBg");
bg.style.width = imgWidth + "px";
bg.style.height = imgHeight + "px";
You can grab all elements with class container and apply it to each of them like this:
var elements = document.querySelectorAll('.container');
for(var i=0; i<elements.length; i++){
elements[i].style.width = imgWidth + "px";
elements[i].style.height = imgHeight + "px";
}
Note querySelectorAll isn't supported by IE7 or lower, if you need those then there are shims for getElementsByClassName() here on SO.

If your rules start incrementing you could extract your css to a new class and switch classes:
CSS:
.container-1{
/* A set of rules */
}
.container-2{
/* A set of rules */
}
JavaScript:
element.className = element.className.replace(/container-1/, 'container-2')

var object = document.createElement('container');
object.style.width= "500px";
object.style.height= "600px";
You can also add values to this if you hold the dimensions in variables
var height = 600;
var width = 500;
You can increment when needed
height += 5;
Here is something you might find useful. It may offer you some insight on how you can solve a problem with many different approaches, seeing as though you are new to js.

How to get width of dynamic added elements with JavaScript

I want to make horizontally scrollable container which will keep child elements on the y-line (width more that 100% of the screen).
If the data was fixed I would calculate it before rendering and setup the width of the container. The problem is that my data is dynamic, I don't know the number of the child elements that will be added and their width. So I decided to add them dynamic to the container DOM as a children, but when I try to get their width after appending, the result is 0. What I am doing wrong, or if you have a better idea how to do that I will be glad to see your way.
This is what I am doing now:
GalleryContainer.prototype.addItem = function(newItem) {
var newItemDiv = document.createElement('div');
newItemDiv.className = 'thumbnail';
content = document.createElement('img');
content.setAttribute('src', newItem);
newItemDiv.appendChild(content);
this.galleryDiv.appendChild(newItemDiv);
this.galleryArray.push(newItemDiv);
// width, offsetWidth, all properties are 0
console.log(newItemDiv.style.offsetWidth);
console.log($(content).css('width'));
console.log($(newItemDiv).innerWidth());
}
EDIT:
I made a jsfiddle example with my problem and in the demo the width is not 0, it's the actual size that i need, so I have to look deeper for the problem.
http://jsfiddle.net/valkirilov/QaHn7/1/

bellow code is working, maybe your newItemDiv is not append into HTML Document:
var newItemDiv = document.createElement('div');
newItemDiv.className = 'thumbnail';
$('body').append(newItemDiv);
// width, offsetWidth, all properties are 0
console.log(newItemDiv.style.offsetWidth);
console.log($(content).css('width'));
console.log($(newItemDiv).innerWidth());

Calculating html element (div) width with javascript/dojo?

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 the height of the text inside of a textarea

I have a textarea with the the text Hello World. I would like to get the height of this text.
I've tried to use:
var element = document.getElementById('textarea');
var textHeight = element.innerHTML.offsetHeight;
and:
var textHeight = element.value.offsetHeight;
But these don't give the numbers of the text, but the height of the textarea element.

element.scrollHeight is probably worth investigating.
If I was going to approach this (and I've not tested this at all), I'd set the textarea's height to 1px measure the scroll height and then reset the textarea's height.
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

Create a span element, set Span's innerHTML to "Hello World".
Get the span's offsetHeight.
var span = document.createElement("span");
span.innerHTML="Hello World"; //or whatever string you want.
span.offsetHeight // this is the answer
note that you must set the span's font style to the textarea's font style.
Your example will NEVER work because innerHTML and value are both strings. String doesn't define offsetWidth.
If you wish to get the height of selected text inside of a textarea, use selectionStart/selectionEnd to find the selected text of the textarea.

In jQuery there is no scrollHeight, so it needs a little workaround. the solution would be:
var areaheight=$("textarea#element")[0].scrollHeight;
$("#element").height(areaheight);
or shorter:
$("#element").height($("#element")[0].scrollHeight)

You can use element.scrollHeight (just like Patrick answered) but it needs some corrections (I'm using jQuery in example):
1) if your textarea has padding, you need to substract it (top & bottom).
2) if element has already set height, you need to set it to zero (just for measure then set it back, else it returns this height + padding)
var h0 = $(element).height(); // backup height
$(this).height(0);
var h = $(this).get(0).scrollHeight - $(this).css('paddingTop').replace('px','')*1 - $(this).css('paddingBottom').replace('px','')*1; // actual text height
$(this).height(h0); // set back original height (or new height using h)
There is no need of extra span with same css as textarea.

For anyone using React:
const textarea_ref = useRef(null);
const [idealHeight,setIdealHeight] = useState(0);
const [inputValue,setInputValue] = useState("");
useLayoutEffect(() => { // useLayoutEffect TO AVOID FLICKERING
textarea_ref.current.style.height = '0px'; // NEEDS TO SET HEIGHT TO ZERO
const scrollHeight = textarea_ref.current.scrollHeight; // TO READ THE CORRECT SCROLL HEIGHT WHEN IT SHRINKS
textarea_ref.current.removeAttribute('style'); // REMOVE INLINE STYLE THAT WAS ADDED WITH 0px
setIdealHeight(scrollHeight + 2); // NEEDS TO ADD 2. I THINK IT'S BECAUSE OF THE BORDER
},[inputValue]);
return (
<textarea
// USE idealHeight STATE TO SET THE HEIGHT
value={inputValue}
onChange={onChange}
ref={textarea_ref}
/>
);
PS: It still flickers sometimes. At least in Chrome.

You can get the text height by getting the textarea scrollbar height
const textarea = document.getElementByTagName("textarea");
const height = textarea.scrollHeight;
console.log({ height });

http://www.quirksmode.org/dom/range_intro.html
sorry that I can't be of more help.
the problem with you example is that inline text does not have a height, it only has a line-height, for it to have a height it needs to be in display block mode, so that all the lines are added to a block of text, even then it all depends on the width of the box and the font-size, font-family etc.
what ItzWarty suggests is getting the text selection and putting it in a div that has the same font and width as the textarea, which has display block and allows you to get its height.

I am not sure whether I interpret your question correctly, but I personally needed to know the exact height of each line of text. The line-height property does not have the right value (for example, in Safari, it will be rounded to the closest value when actually printing text).
This is my workaround. You should have the following code somewhere at the beginning of the document.
// set one row in the textarea and get its height
element.rows = 1;
var height1 = parseFloat(window.getComputedStyle(element)["height"]);
// set two rows in the textarea and get its height
element.rows = 2;
var height2 = parseFloat(window.getComputedStyle(element)["height"]);
// Now, the line height should be the difference
var inputLineHeight = height2-height1;
The variable inputLineHeight should contain the correct value, in pixel.