Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts

    is there a mozilla equivalent for currentStyle

    so for example, if an object has its width specified as "8em", I want a property of that object which returns "8em" ?
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Does window.getComputedStyle(element,null).width work for that?
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by liorean
    Does window.getComputedStyle(element,null).width work for that?
    Should technically be document.defaultView.getComputedStyle(). Just because Mozilla and Opera 7 both point defaultView to window does not mean all future compliant browsers will too.

    Also, I have always used getPropertyValue() or getPropertyCSSValue() on the returned ComputedCSSStyleDeclaration because I seem to remember issues on earlier builds about the shorthand properties being absent?

    var computedWidth = document.defaultView.getComputedStyle(someelement, null).getPropertyValue("width");

    If you want to shortcut this, and feel comfortable using shorthand properties, I guess you could always do:

    HTMLElement.prototype.__defineGetter__("runtimeStyle", function() {
    return document.defaultView.getComputedStyle(this, null);
    });

    Note that I chose runtimeStyle instead of currentStyle. The ComputedCSSStyleDeclarations that the method returns are read-only - you cannot modify the property value. DOM2 CSS defines an override style method (document.getOverrideStyle), however Mozilla does not implement this, (Opera 7 doesn't implement any of this, not even getComputedStyle as far as I know).

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    defaultView is technically equivalent to the viewport, which in javascript is represented by window, so it's natural for it to be mapped there. Especially since both Opera and Mozilla set the way. (How about Konq/Saf?)

    The computed style of a shorthand property shouldn't exist - it should be translated into the properties making it up.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by liorean
    defaultView is technically equivalent to the viewport, which in javascript is represented by window, so it's natural for it to be mapped there. Especially since both Opera and Mozilla set the way. (How about Konq/Saf?)

    The computed style of a shorthand property shouldn't exist - it should be translated into the properties making it up.
    I meant shorthand properties as in bla.width instead of bla.getPropertyValue("width"). Bad terminology on my part, now that I think about it.

    As for window -> viewport, I'm not willing to concede they are one the same. window also includes various other properties not relating to the viewport. I have no problem with defaultView mapping there, but I'm not willing (maybe it's just me) to assert that defaultView will always be the window object in every browser to support DOM2.

    And DOM does not talk about the window object at all - it just seems more consistent in my weird world that my DOM scripting not reflect usage of the window object either.

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    That's because window is also the host object in JavaScript as used in the browser - window is BOTH a reference to the viewport AND a reference to the host object, because in browsers the viewport is essentially the host environment of the scripting engine.

    The DOM doesn't talk about the window because the DOM is targeted at document handling, not UI handling. You might have to be able to reference the viewport from the document to determine some properties of it, though, and that's why it exists in the DOM at all.
    Last edited by liorean; 04-27-2003 at 09:01 PM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah that document.defaultView.getComputedStyle(...).getPropertyValue() is what I tried - trouble is, that returns a computed style - a value in pixels. I want to retrieve the value in whatever unit it's actually using ..?
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #8
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Then you have not choice (that I know of) but to find the style rule that originally specified the property you're trying to read.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    By reading through the stylesheet line by line until I find the matching rule ... yuck ... I was afraid of that ....
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #10
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Not only that - you have to read all stylesheet rules that applies the sought property to your element, sift through them to know the order and specificity and then calculate what is actually used.

    "Yuck" clearly describes it, though you might prefer something a bit more colorful.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #11
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    In theory, I believe you could do:

    document.defaultView.getComputedStyle(someelement, null).getPropertyCSSValue("width").getFloatValue(CSSPrimitiveValue.CSS_EMS)

    http://www.w3.org/TR/2000/REC-DOM-Le...PrimitiveValue

    Look at getFloatValue(). It doesn't mandate that browsers be able to convert, but it doesn't prohibit it either. Just says to throw an exception if it can't convert, which is what my 1.4 nightly does.

    Oh well... that kinda sucks. DOM2 CSS has a lot of issues though... if you've looked at hixie's journal (a Mozilla developer and also on the CSS committee I think) lately, you'll notice his frustrations with it too. It'll change...

  • #12
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Hixie is on my reading list. The problem as I understand it, is not that Brothercake wants to get the answer in ems - he wants it in whatever format it was specified. That, I can't find any functionality for getting but the reading of the style rules that applies. And the element style attribute, of course.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #13
    Regular Coder
    Join Date
    Sep 2002
    Location
    self.location
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    late-breaking news...

    "I want to retrieve the value in whatever unit it's actually using ..?"

    Brothercake, if you set the attribute via cssText within the element's tag itself (rather than in a stylesheet), and then query the property you'll get the desired unit as answer.

    eg: <div id=yadda style="width:10em"></div>


    document.getElementById("yadda").style.width

    - or -

    document.getElementById("yadda").style.getPropertyValue("width")


    ... both return "10em" - not just "10" and not just ""

    (or you can sniff via style.cssText for the full string)

    Also, when setting the original value via cssText, any js changes made to the property after layout occurs will be updated in the property's value (similarly to currentStyle).

    ...

    I realize that this is less than perfect, but depending on context might be a workable solution. If you're only targetting one or two elements or attributes, at least it's better than having to comb through all the rules. Or you could use a for() loop to set the same attribute value via cssText on a bunch of elements prior to layout.

  • #14
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by realisis
    if you set the attribute via cssText within the element's tag itself (rather than in a stylesheet), and then query the property you'll get the desired unit as answer.
    Sure, but I didn't set the value myself - it has to work from a normal stylesheet in an environment where I don't know anything at all about what CSS is being used.

    Thanks anyway I've since taken a different approach, in which it wasn't necessary to know.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #15
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Now I know exactly what you mean, that was very helpful!! Thanks a million!! I'll go re-check the whole thing. Also thanks for your kind information. I like your blog very much because of its interesting topics. i'm student and preparing for my exam of testking 70-270 for attaining the certification. Although it is not hard to get certified but it keeps me busy. I've also attained certification of another course of testking 70-294 which I had passed last three months back. Also I am trying to complete my pending thesis project of testking E20-361 which I'm sure will be completed soon. I normally search on topics which you described on your blog these are great and really informative. Thanks for beneficial thread.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •