Get style as number?

Board index » YUI 3.x: » General

Page 1 of 1

[ 5 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

Carlos Adriano Portes

Username: xcap2000
Joined: Mon Feb 14, 2011 2:09 pm
Posts: 8
Location: Brazil
GitHub: xcap2000
Gists: xcap2000
IRC: xcap2000

Tags:

Get style as number?

Posted: Thu Jan 19, 2012 10:44 am

+0-

Is it possible to do something like:

var node = Y.one('#myNode');
var width = node.getStyle('width'); // return 10px
var newWidth = width + 10; // return 10px10

Where the result is '10px10' I would like it to be '20px'.

Is there any solution.

Thanks in advance.

Dav Glass

Username: davglass
Joined: Thu Aug 28, 2008 9:28 am
Posts: 2088
Location: Marion, IL, US
Twitter: davglass
GitHub: davglass
Gists: davglass
IRC: davglass

Tags:

number

Re: Get style as number?

Posted: Thu Jan 19, 2012 11:13 am

+0-

Code:

var node = Y.one('#myNode');
var width = parseInt(node.getStyle('width'), 10); // return 10
var newWidth = width + 10; // return 20

Matt Sweeney

YUI Developer

Username: msweeney
Joined: Mon Dec 08, 2008 4:58 pm
Posts: 77
Twitter: msweeney
GitHub: msweeney
Gists: msweeney

Tags:

Re: Get style as number?

Posted: Thu Jan 19, 2012 11:29 am

+0-

If you want the actual rendered width (which also includes borders and padding by default) as opposed to the style.width, you can get the offsetWidth, which is a number in pixels without the units:

Code:

var width = node.get('offsetWidth');
var newWidth = width + 10;

Also, be aware that getStyle() may return a value in units other than pixels:

Code:

node.setStyle('width', '40%');
var width = node.getStyle('width'); // 40%

To guarantee pixel units for width, use getComputedStyle():

Code:

node.setStyle('width', '40%');
var width = node.getComputedStyle('width'); // style width converted to pixels

Carlos Adriano Portes

Username: xcap2000
Joined: Mon Feb 14, 2011 2:09 pm
Posts: 8
Location: Brazil
GitHub: xcap2000
Gists: xcap2000
IRC: xcap2000

Tags:

number

Re: Get style as number?

Posted: Thu Jan 19, 2012 4:30 pm

+0-

First of all its an honor to have a question answered by you YUI developers, its very nice to see videos from you and receive help on the forums from you. Thank you all for helping thats exactly what I needed.

Djalma Araujo

Username: djalmaaraujo
Joined: Tue Jul 10, 2012 11:55 am
Posts: 1
GitHub: djalmaaraujo
Gists: djalmaaraujo
IRC: djalmaaraujo

Re: Get style as number?

Posted: Mon Oct 22, 2012 5:08 am

+0-

Hi guys, this solution with parseInt() may broken on IE? Because on IE, sems that getComputedStyle doesn't return always in pixels!

YUI solve this on method implementation?

Page 1 of 1

[ 5 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum