Develop Reference

JavaScript - Get element height value with px

So my objective is to get the height of an element whith the px.
I already know my height value, but does not bring the xp.
This is what i have done to get my value :
let elemHeight = document.querySelector(".user-name").clientHeight;
console.log(elemHeight);
I need some help figuring out how to get the px.
Thank you !

Try this:
var css = document.querySelector('.user-name');
console.log(window.getComputedStyle(css).height);

The clientHeight is the px value so using concatenation you can just do the following:
let elemHeight = document.querySelector(".user-name").clientHeight;
let elemHeightPx = elemHeight + 'px';
console.log(elemHeightPx);
<div class="user-name">
Show me the px value in the box below!
</div>

How to find css unit for this number

I have a input type text
<input type="text">
Basically I am using javascript ClientRect to get caret details. ClientRect looks like this
[object ClientRect]
{
[functions]: ,
__proto__: { },
bottom: 540.7999877929687,
constructor: { },
height: 24,
left: 1034.5399169921875,
right: 1034.5399169921875,
top: 516.7999877929687,
width: 0
}
This is generated on everytext input.
left: 1034.5399169921875,
left: 1065.5399169921875,
left: 1078.5399169921875,
I want to convert this number to CSS units like px/%/rem/vh. So that I can put dynamic css. How to do it?

Try accessing the left position of your input and subtract the left position of your caret. This should give you an approximate width of the text in the input, if that's what you are looking for. You'll need to add an id or create a selector for your text input.
var inputElementRect = document.getElementById('YOURINPUTID').getBoundingClientRect()
var width = inputElementRect.left - caretRect.left

Those values are px by default .. so just add suffix as px to that value and use it.
<input type="text">
to get that value
let text = document.querySelector('input');
let values = text.getBoundingClientRect();
let top_value = values.top + 'px';
let bottom_value = values.bottom + 'px';
let width_value = values.width + 'px';
let height_value = values.height + 'px';
console.log('top: '+ top_value);
console.log('bottom: '+ bottom_value);
console.log('width: '+ width_value);
console.log('height: '+ height_value);
here properties other than width and height are relative to the view port ( top, bottom, left, right ) ,
so if scroll this values will changes ..
to get the perfect values even if scroll add this values with window.scrollX , window.scrollY or can use window.pageXOffset , window.pageYOffset

So if I understand the question correctly, you have position values for the cursor inside of the input and you want to convert it into different types of CSS units, presumably so you can do something to the input or related things
The first thing to understand is that ClientRect positions are relative to the viewport. So as vhutchinson pointed out, if you want the width of text you need to compare to the input's "left" value as defined by getBoundingClientRects. That's a good start, but if you're not just influencing left but also care about top, you need to account for scrolling. If your window/page is the only scrolling container, you should be able to do this simply by adding window.scrollY to top, and window.scrollX to left to understand your offset relative to the window.
All of these units are pixels by default... if you want to convert to rem it's pretty straightforward, 1 rem = the font-size of your root element, so to convert to rem you can do something like
var remBase = parseInt(window.getComputedStyle(document.body).getPropertyValue('font-size'), 10);
var remValue = (myComputedPixelValue / remBase) + "rem";
Doing VW is similar using the answer in Get the browser viewport dimensions with JavaScript for cross-browser window dimensions, you'd end up with something that looks like
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var vwValue = (myComputedPixelValue / viewportWidth) + "vw";
Percentages are trickier, because you'd need to compute it based on the parent of the element you're applying the css value to, but the general idea follows the same principle.

Set width (or height) of element as percentage of higher ancestor element

If I have a DOM structure with three DIVs A, B & C where C is a child of B; and B is a child of A - is there a way to set the width (or height) of C to be a percentage of the width (or height) of A?
PS: jQuery is available, and any jQuery functionality can be used.

Well, in that case, try $('#c').height( $('#c').parent().parent().height() * pct/100 )

If it has to be calculated once only (no resize problems), just fetch the height of A and set the height of C accordingly.
var heightA = $('#divA').height();
var heightC = heightA * 0.50; // 50%
$('#divC').height(heightC);

Try this
$(function(){
var height = $("#A").height();
var width = $("#A").width();
$("#c")
.width(width * 0.10);//10%, you can set whatever percent you need
.height(height * 0.10);//10%, you can set whatever percent you need
});

This would work:
var height_A = $('#div_A').height();
var width_A = $('#div_a').width();
$('#div_C').height(height_A*0.30); // for 30%
$('#div_C')width(width_A*0.30); // for 30%

Assuming A's parent has no width defined and A and B can't be width:100% for a much more lightweight and sensible CSS solution:
$('#divC').height( $('#divA').height() * (percentage/100) );
If this is for a real-world problem, it's a bad solution. Never solve layout problems with the JS-hammer.
The following would be ideal.
#parent_of_a { width:<anything>; }
#a, #b { width:100%; }
#c { width:<whatever>% };
CSS % width requires that an element's parent's width is defined.

Try this:
$(function(){
var aheight = $("#a").height();
var awidth = $("#a").width();
$("#c").width(awidth * 0.50).height(aheight * 0.50);
});

You shouldn't solve layout issues with JavaScipt, since JS can be disabled. That being said...
This code should work even if the window is resized.
function setDimension() {
var containerWidth = $('#divC').parent().parent().width();
$('#divC').width(containerWidth * 0.5);
}
$(setDimension); // do it on initial load
$(window).resize(setDimension); // do it when window is resized

HTML width supports percentages. I don't see how you'd need to do anything special to make it work.

Javascript image height and other calculation

I was having a problem on getting the height and also calculating other calculations.
I want to get the image height after it has loaded, so I put it on the onload attribute of <img></img> function, here's my code
<p class="test1" style="position:absolute;bottom:0px;">
<img src="'+getBaseURL()+'js/check/no-image.png" rel="fullname"
onload="verticalCenter()"/>
</p>
function verticalCenter(){
var imageHeight = jQuery(".test1 img").height(); //I get a result of 0
var total = imageHeight / 2 + 80
}
I already tried using setTimeout but it still fails.
What I was planning to do here is to set the css of <p class="test1"> into like this:
jQuery(".test1").css("bottom","-"+total);
As I said, this isn't working because I don't get a result in total.
How would I do this, Is there a way to solve this problems, I'm already scratching my head on this.
Thanks in advance!

$(window).load(function () {
var imageHeight = jQuery(".test1 img").height(); //I get a result of 0
var total = imageHeight / 2 + 80
}
<p class="test1" style="position:absolute;bottom:0px;">
<img src="'+getBaseURL()+'js/check/no-image.png" rel="fullname"/>
</p>

You need units on CSS dimensions.
jQuery(".test1").css("bottom","-"+total+"px");
You should also check to make sure that total is the value you are expecting it to be before setting it.
http://jsfiddle.net/jfriend00/yHqr7/

It might be easier to set all the image heights when the form is ready:
$(document).ready(
$('p.text1 img').each(verticalCenter);
)
Unless you're using ajax to load the images; if that is the case, then you should use the live() event:
$('p.text1 img').live(verticalCenter);
Then in your function you can set everything:
function verticalCenter(){
$(this).css('bottom',"-" + ($(this).height() / 2 + 80) + 'px');
}

How to change the left attribute on page resize (jQuery)

I'm having slight troubles with my code. What I'm trying to do is make these element's css property 'left' update according to the difference of it's current left value, and the amount the page resizes. This way, when the page resizes and the background moves over, the elements will move too. Take a look at the code below and I'll describe the issue:
$(window).resize(function() {
var docWidth = $(window).width();
if (docWidth < 1000) {
var difference = 1000-docWidth;
$('#headNav a,#icons div').each(function() {
var left = $(this).position().left;
var newLeft = left - difference;
$(this).css({ 'left' : newLeft });
});
}
});
So the issue that I'm getting is the elements are being given left values of wild numbers, while the value of the variable 'newLeft' is the reasonable, desired value. The each function I think is collecting the sums of these values and running them for each element x amount of times that the elements found exist (so if there's 5 elements it runs 5 times, I mean.) What I want is this code to execute uniquely for each element, but just once each, not each element 10 times! (that's how many elements are in the html).
So my question is, how can this be achieved? I hope I explained myself well enough, this was tough to iterate. Any help is extremely appreciated. Thank you!

Here's a fun trick: Include += in your .css() call:
$(this).css({left: "+=" + difference});
jQuery does the math for you to get the new value.

Try this:
$(window).resize(function() {
var docWidth = $(window).width();
if (docWidth < 1000) {
var difference = 1000-docWidth;
$('#headNav a,#icons div').each(function(iconInst) {
var left = $("#" + iconInst).position().left;
var newLeft = left - difference;
$("#" + iconInst).css({ 'left' : newLeft });
});
}
});