CODEWITHSUNDEEP
javascripthtmlcss
QuinnF
QuinnF

Reputation: 2159

Get a number for a style value WITHOUT the "px;" suffix

I am trying to do some comparison logic about the positions of HTML elements. I have a system that I think should work, but there is a problem.

In my code I compare the current left and top values of one absolutely positioned element to those of another (which may be moving) using inequality statements (> and <). The problem is that the feedback I get form document.getElementById(nameVar).style.left is in the form of a string (e.g. 200px) not a number (e.g. 200), so the comparisons don't work.

My question is, is there any way to turn the string into a number that I can manipulate the way I want to? Either by using an altered address or by preforming some procedure with the feedback once I get it.

Any help would be great.

Upvotes: 83

Views: 72664

Answers (5)

Даниил Пронин
Даниил Пронин

Reputation: 1306

Just solved this issue with TypeScript:

const parseCSSNumericValue = (value: string, unit: string): number | undefined => {
    const match = value.match(new RegExp(`(-?\\d+)${unit}`))
    if (!match) return
    const [, g1] = match
    return Number(g1)
}

You have to provide a value like '10px' and a unit you want to catch, like 'px'.

const [x] = getComputedStyle(element).backgroundPosition.split(' ')
const pixels = parseCSSNumericValue(x, 'px')

It's because you do not want to get 10 when you want to parse pixels but there is a '10%'.

Upvotes: 0

Martin Melichar
Martin Melichar

Reputation: 1156

You may also use:

element.getBoundingClientRect()

it returns DOMRect object (with some useful coordinates).

Upvotes: 8

David Thomas
David Thomas

Reputation: 253318

An alternative approach to the one from Konsolenfreddy, is to use:

var numericValue = window
    .getComputedStyle(document.getElementById('div'),null)
    .getPropertyValue('left')
    .match(/\d+/);

JS Fiddle demo.

The benefit of this approach is that it works to retrieve the value set in CSS, regardless of that value being set in the style attribute of the element or in a linked stylesheet, which I think Konsolenfreddy's approach is limited by.

References:

Upvotes: 17

konsolenfreddy
konsolenfreddy

Reputation: 9671

parseInt gives you the numerical value:

var tmp = parseInt(document.getElementById(nameVar).style.left, 10);
console.log(tmp);

or, as @PeteWilson suggests in the comments, use parseFloat

Upvotes: 121

ThinkingStiff
ThinkingStiff

Reputation: 65341

You can use .offsetLeft and .offsetTop to get values without px and the return type is numeric.

Demo: http://jsfiddle.net/ThinkingStiff/2sbvL/

Script:

var result = document.getElementById( 'result' ),
    position = document.getElementById( 'position' );

result.textContent = position.offsetLeft + ', ' + position.offsetTop;

HTML:

<div id="position"></div>
<div id="result"></div>

CSS:

#position {
    border: 1px solid black;
    height: 50px;
    left: 50px;
    position: absolute;
    top: 50px;
    width: 50px;
}

Output:

enter image description here

Upvotes: 9

Related Questions