/    Sign up×
Community /Pin to ProfileBookmark

clientWidth & offsetWidth

Copy linkTweet thisAlerts:
Feb 07.2007

do the element.clientWidth & offsetWidth properties return width inclusive of padding, margin and borders or just the raw width of the useable area of the element.

I need to use this information in order to correctly resize page elements to the user’s screen.

Something I have discovered in the process

[LIST]

  • [*]

    Firefox, FF158 at the moment, when asked to return cssRules does not break up multiple comma separated selectors – e.g. .logo,.info,.clock – into individual entries in cssRules but DOES go and put a space after each comma


  • [*]

    MSIE7 on the other hand breaks up the comma separated entries into individual ones in its stylesheet.rules property


    • [/LIST]

    Are there any other inconsistencies in this vein that I need to know about?

    to post a comment
    JavaScript

    6 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @FredAtauthorFeb 07.2007 — Would this form the basis for a reliable em to px conversion

    [LIST=1]
  • [*]Define a CSS style with em as the width unit

  • [*]Use that style for a page element

  • [*]Retrieve the offsetWidth/clientWidth, [B]w[/B], of that element

  • [*]Retrieve the em width, [B]w_em[/B], of the relevant CSS style - better doing this rather than hardcoding a value since the technique would breakdown if the CSS were altered at a later stage

  • [*]Now emTopx = w/w_em

    • [/LIST]

    This works irrespective of the user's font settings. The only thing I am not sure of here is whether I need to take the style border, margin and padding into account into my calculations here in some way.

    I am doing all this in an attempt to get a "perfect" screen rendition of my web app irrespective of user browser settings. Perhaps an unrealistic goal so I'd appreciate any comments here.
    Copy linkTweet thisAlerts:
    @FangFeb 07.2007 — http://msdn.microsoft.com/library/default.asp?url=/workshop/Author/om/measuring.asp

    http://www.quirksmode.org/js/doctypes.html

    I am doing all this in an attempt to get a "perfect" screen rendition of my web app irrespective of user browser settings. Perhaps an unrealistic goal so I'd appreciate any comments here.[/QUOTE]
    You can dream ...
    Copy linkTweet thisAlerts:
    @konithomimoFeb 07.2007 — Mozilla only takes the exact width/height, where as other browsers, such as explorer include the padding and other attributes.
    Copy linkTweet thisAlerts:
    @FredAtauthorFeb 07.2007 — Mozilla only takes the exact width/height, where as other browsers, such as explorer include the padding and other attributes.[/QUOTE]

    Are you sure you don't mean the opposite? In principle I would expect FF to do as you say since it obeys W3C directives so much better but I am seeing some odd effects.
    Copy linkTweet thisAlerts:
    @konithomimoFeb 07.2007 — Are you sure you don't mean the opposite? In principle I would expect FF to do as you say since it obeys W3C directives so much better but I am seeing some odd effects.[/QUOTE]

    Well, offsetWidth/Height is not part of any W3C specification and is not even a technical recommendation according to Mozilla. In older versions Mozilla did not include the padding, since the default padding was 0, but looking at the updated info on their site, offsetWidth/Height will include the border, padding, scroll bar, and the CSS width/height.

    http://developer.mozilla.org/en/docs/DOM:element.offsetWidth

    You may also want to look here:

    http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/measuring.asp
    Copy linkTweet thisAlerts:
    @FredAtauthorFeb 08.2007 — Well, offsetWidth/Height is not part of any W3C specification and is not even a technical recommendation according to Mozilla. In older versions Mozilla did not include the padding, since the default padding was 0, but looking at the updated info on their site, offsetWidth/Height will include the border, padding, scroll bar, and the CSS width/height.

    http://developer.mozilla.org/en/docs/DOM:element.offsetWidth

    You may also want to look here:

    http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/measuring.asp[/QUOTE]

    Yes, this is far more in keeping with what I see. Thanks. I have to say, the Microsoft figure explaining the various measurements is a rather neat one. I find it hard to think kindly of MS and IE - they make development so much harder when compared to FF.
    ×

    Success!

    Help @FredAt spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...