Forums

Board index » YUI 3.x: » General

Page 1 of 1   [ 7 posts ]
New Topic | Post Reply | Print view

chidat

  • Joined: Tue Oct 18, 2011 2:22 pm
  • Posts: 4
  • Offline
  • Profile
Tags:

Cannot access dynamic CSS style with getStyle()

Post Posted: Tue Oct 18, 2011 2:51 pm
+0-
Hi,

I'm trying to access the "background-image" attribute of a dynamically changing background image with getStyle('background-image'), but I'm getting a string in the format of 'DIV#bd yui_3_3_0_1_1318976389400_175'. The image changes based on the selection from a dropdown box, which changes the class name associated with the div tag:
Code:
<div id="bd" class="bg1">
...
</div>

Code:
...
var onSelect = function(e) {
  var item = e.currentTarget,
      bd = Y.one('div#bd');
  bd.set('className', item.get('value'));
};
...

The CSS defines each background image based on the class name:
Code:
<style>
div#bd.bg1 {background-image: url('images/StudentHomeGraphic1.jpg'); height: 540px;}
div#bd.bg2 {background-image: url('images/StudentHomeGraphic2.jpg'); height: 430px;}
...
</style>


I would like to access the value stored in 'background-image'. I have a button that uses onClick to trigger the event to get the style, but getStyle does not work for this case. Any suggestions would be helpful.

Thank you!

chidat

  • Joined: Tue Oct 18, 2011 2:22 pm
  • Posts: 4
  • Offline
  • Profile

Re: Cannot access dynamic CSS style with getStyle()

Post Posted: Tue Oct 18, 2011 4:12 pm
+0-
I found the solution to this problem by using getComputedStyle('backgroundImage') instead of getComputedStyle('background-image'). The latter was specified in the Node API, but is incorrect. The same format can be used for background-color (backgroundColor) and so forth.

Luke Smith

YUI Contributor

  • Username: lsmith
  • Joined: Thu Aug 28, 2008 7:50 am
  • Posts: 514
  • Location: Sunnyvale
  • Twitter: ls_n
  • GitHub: lsmith
  • Gists: lsmith
  • IRC: ls_n
  • YUI Developer
  • Offline
  • Profile

Re: Cannot access dynamic CSS style with getStyle()

Post Posted: Wed Oct 19, 2011 10:11 am
+0-
Can you point out where in the Node API it says hyphenated style properties are accepted? That's clearly a typo and needs fixing!

chidat

  • Joined: Tue Oct 18, 2011 2:22 pm
  • Posts: 4
  • Offline
  • Profile
Tags:

Re: Cannot access dynamic CSS style with getStyle()

Post Posted: Wed Oct 19, 2011 12:21 pm
+0-
Sure, here is the link:
http://yuilib.com/yui/docs/api/classes/Node.html#method_getComputedStyle

It states: "Returns the computed value for the given style property. Use CSS case (e.g. 'background-color') for multi-word properties."

Thanks!

Luke Smith

YUI Contributor

  • Username: lsmith
  • Joined: Thu Aug 28, 2008 7:50 am
  • Posts: 514
  • Location: Sunnyvale
  • Twitter: ls_n
  • GitHub: lsmith
  • Gists: lsmith
  • IRC: ls_n
  • YUI Developer
  • Offline
  • Profile

Re: Cannot access dynamic CSS style with getStyle()

Post Posted: Thu Oct 27, 2011 8:59 am
+0-
Sure does! Thanks for finding this chidat.

Sarah Johnosn

  • Username: sunshine1708
  • Joined: Thu Oct 20, 2011 8:11 pm
  • Posts: 1
  • Offline
  • Profile

Re: Cannot access dynamic CSS style with getStyle()

Post Posted: Fri Oct 28, 2011 1:49 am
+0-
The same problem here. Thanks for coming up with the solution.

Luke Smith

YUI Contributor

  • Username: lsmith
  • Joined: Thu Aug 28, 2008 7:50 am
  • Posts: 514
  • Location: Sunnyvale
  • Twitter: ls_n
  • GitHub: lsmith
  • Gists: lsmith
  • IRC: ls_n
  • YUI Developer
  • Offline
  • Profile
Tags:

Re: Cannot access dynamic CSS style with getStyle()

Post Posted: Tue Nov 22, 2011 4:36 pm
+0-
Well, it took a lot longer than I thought to get a simple doc fix in, but I just wanted to close the loop and say that the method API docs for the style methods have been fixed.
https://github.com/lsmith/yui3/commit/f ... 32fc80a040
(this is my dev fork, but the commit made to the official github repository should show up soon)

There was an existing ticket for this, which I updated with the details about how and why getStyle (et al) are failing for CSS cased property names is some browsers:
http://yuilibrary.com/projects/yui3/ticket/2530019
Page 1 of 1   [ 7 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
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

Recent Forums Posts

Recent YUI Blog Posts

Online Users

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group