#361 enhancement
Xanadu

Get all style properties with Element#getStyle?

Reported by Xanadu | September 26th, 2008 @ 01:46 AM | in 1.7

Wouldn't it be nice to be able to call


$('foo').getStyle();

to get all CSS properties of an element or


$('foo').getStyle(['fontSize', 'margin-left']);

to get a couple of properties?

Comments and changes to this ticket

  • Juriy Zaytsev
  • Xanadu

    Xanadu September 26th, 2008 @ 10:33 PM

    Mainly debugging and laziness, in my opinion it would also be more consistent with Element#setStyle.

    A simple use case would be copying style properties from one element (#foo) to another (#bar):

    
    $('bar').setStyle($('foo').getStyle(['font-size', 'margin-left']));
    
  • Juriy Zaytsev

    Juriy Zaytsev September 26th, 2008 @ 11:11 PM

    • Assigned user set to “Juriy Zaytsev”
    • State changed from “new” to “enhancement”
    • Milestone set to 1.7
    • Tag changed from element, enhancement, function, selector to element, enhancement, function, needs_patch, needs_tests, selector

    Interesting.

    It's actually somewhat trivial to implement yourself (see below), but I definitely see the usefulness.

    
    Element.addMethods({
      getStyles: function(element) {
        return $A(arguments).slice(1).inject({}, function(m, c) {
          m[c] = Element.getStyle(element, c);
          return m;
        });
      }
    });
    
    someElement.getStyles('color', 'opacity', 'position');
    
  • Xanadu

    Xanadu October 2nd, 2008 @ 12:18 AM

    Will this be a new method or will it merged with getStyle?

  • Tobie Langel

    Tobie Langel October 2nd, 2008 @ 01:38 AM

    Kangax, I think you're missing the point. Getting the computed style object is a costly operation, hence the suggestion of getting it once and then querying it multiple times.

  • Juriy Zaytsev

    Juriy Zaytsev October 2nd, 2008 @ 02:54 AM

    Tobie, good point about performance, but how would one work around cross-browser issues (when working directly with an object returned by getComputedStyle)?

    getStyle takes care of a fistful of cross-browser issues (Opera's position related properties, IE's opacity, offsets, etc.)

    getStyles would be convenient as a shortcut for querying multiple getStyle - making code more concise.

    Can we also optimize it?

    Am I missing something?

  • Andrew Dupont

    Andrew Dupont October 3rd, 2008 @ 06:55 PM

    • Assigned user changed from “Juriy Zaytsev” to “Justin Palmer”

    I think we'd redefine getStyle to work a lot like $ — if it's passed multiple arguments, it calls itself on each one in turn.

    In pseudocode:

    
    Element.getStyle = function(element, style) {
      function _getFromStyleObject(obj, prop) {
        return the computed/normalized property
        (accounting for browser quirks)
      }
    
      get the style object
    
      if (just one property name passed)
        call _getFromStyleObject and return the result
      else
        map each property name to _getFromStyleObject
        and return an array of results
    };
    

    This would actually be good plumbing for the layout/positioning stuff we're doing for 1.6.1.

  • Andrew Dupont

    Andrew Dupont October 3rd, 2008 @ 06:55 PM

    • Assigned user changed from “Justin Palmer” to “Andrew Dupont”
  • Xanadu

    Xanadu October 3rd, 2008 @ 10:29 PM

    That answers my question.

    If it is going to be $-ish, calling the function would become:

    
    x.getStyle('font-size', 'marginLeft');
    
  • ronin-15560 (at lighthouseapp)

    ronin-15560 (at lighthouseapp) June 23rd, 2009 @ 04:12 PM

    If it's helpful, here's what I have in script (PROPERTIES is an array of all CSS properties supported by 'morph').

    ElementMethods: {
      getStyles: function(element) {
        var css = document.defaultView.getComputedStyle($(element), null);
        return s2.css.PROPERTIES.inject({ }, function(styles, property) {
          styles[property] = css[property];
          return styles;
        });
      }
    }
    
    if (!(document.defaultView && document.defaultView.getComputedStyle)) {
      s2.css.ElementMethods.getStyles = function(element) {
        element = $(element);
        var css = element.currentStyle, styles;
        styles = s2.css.PROPERTIES.inject({ }, function(hash, property) {
          hash[property] = css[property];
          return hash;
        });
        if (!styles.opacity) styles.opacity = element.getOpacity();
        return styles;
      };
    };
    
  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:07 AM

    • Tag changed from element, enhancement, function, needs_patch, needs_tests, selector to element, needs_patch, needs_tests, section:lang

    [not-tagged:"function" tagged:"section:lang" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:11 AM

    • Tag changed from element, needs_patch, needs_tests, section:lang to element, needs_patch, needs_tests, section:dom, section:lang

    [not-tagged:"dom" tagged:"section:dom" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:12 AM

    • Tag changed from element, needs_patch, needs_tests, section:dom, section:lang to needs_patch, needs_tests, section:dom, section:lang

    [not-tagged:"element" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:26 AM

    • Tag changed from needs_patch, needs_tests, section:dom, section:lang to missing:tests, needs_patch, section:dom, section:lang

    [not-tagged:"needs_tests" tagged:"missing:tests" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:28 AM

    • Tag changed from missing:tests, needs_patch, section:dom, section:lang to missing:patch, missing:tests, section:dom, section:lang

    [not-tagged:"needs_patch" tagged:"missing:patch" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 03:36 AM

    • Tag changed from missing:patch, missing:tests, section:dom, section:lang to missing:patch, needs:tests, section:dom, section:lang

    [not-tagged:"missing:tests" tagged:"needs:tests" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 03:37 AM

    • Tag changed from missing:patch, needs:tests, section:dom, section:lang to needs:patch, needs:tests, section:dom, section:lang

    [not-tagged:"missing:patch" tagged:"needs:patch" bulk edit command]

  • T.J. Crowder

    T.J. Crowder November 16th, 2009 @ 04:50 PM

    • Assigned user cleared.

    [responsible:none bulk edit command]

  • Tobie Langel

    Tobie Langel March 1st, 2010 @ 04:57 PM

    • Tag changed from needs:patch, needs:tests, section:dom, section:lang to needs:patch, needs:tests, section:dom

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Prototype JavaScript library.

Shared Ticket Bins

Pages