Passing variables to jquery .css() function

Question

I'm trying to setup some hyperlinks to set inline styles for various elements on a webpage. So far I have been able to store the element and attribute settings in hidden span elements and pass them to an alert dialog. However when I try to set these styles using the css function it is not working or throwing any errors.

HTML:

<a class="styleswitch">Boxed
<span class="elementselector" style="display:none">#page</span>
<span class="styleattributes" style="display:none">"width": "1000px"</span>
</a>
<a class="styleswitch">Wide
<span class="elementselector" style="display:none">#page</span>
<span class="styleattributes" style="display:none">"width": "100%"</span>
</a>

jQuery:

jQuery(document).ready(function(){
    jQuery('a.styleswitch').click(function(){
    var element_selector = jQuery(this).find("span.elementselector").contents().text(),
        style_attributes = jQuery(this).find("span.styleattributes").contents().text();

    // alert('Set ' + element_selector + ' to ' + style_attributes + '');

    jQuery(element_selector).css( style_attributes );

    return false;
});

1) It looks like your click function doesn't have a closing bracket, 2) Can you put this in a fiddle please? Easier to help that way — Blundering Philosopher
– Blundering Philosopher, Commented Jan 5, 2014 at 22:24
You are passing a string to .css() method, this means you are using it as a getter and not a setter. — Ram
– Ram, Commented Jan 5, 2014 at 22:26
I have added a fiddle jsfiddle.net/pQ5US that includes a third example which passes 2 css attributes at once which is a requirement I forgot in the initial question. — sr83
– sr83, Commented Jan 5, 2014 at 22:41

Ram · Accepted Answer · 2014-01-05 22:50:25Z

2

You are passing a string to the .css() method, this means you are using it as a getter and not a setter.

I would suggest using HTML5 data-* attributes, here data-styles is a string representation of an object, by using jQuery .data() method you will have an object:

<a data-styles='{ "width": "1000px", "prop": "value" }' 
   data-selector="#page"
   class="styleswitch">
      Boxed
</a>

JavaScript:

$('a.styleswitch').on('click', function() {
   var data = $(this).data();
   $(data.selector).css(data.styles); 
});

http://jsfiddle.net/7t4Jb/

edited Jan 5, 2014 at 22:50

answered Jan 5, 2014 at 22:37

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stefanos Vakirtzis · Accepted Answer · 2014-01-05 22:36:43Z

0

Change jQuery(element_selector).css( style_attributes );

to ==> jQuery(element_selector).css( {style_attributes} );

and it should work.

There are 2 ways to implement css in jquery:

.css("width","px")

or

.css({"width":"px"})

What you were doing wrong was trying to implement css with the second way but with no {}.

Hope i helped you.

answered Jan 5, 2014 at 22:36

Stefanos Vakirtzis

4481 gold badge7 silver badges19 bronze badges

Comments

Edgar Villegas Alvarado · Accepted Answer · 2014-01-05 22:39:58Z

With this:

jQuery(element_selector).css( JSON.parse("{" + style_attributes + "}"));

Yes, it works.

Another option:

 var styleParts = style_attributes.split(":");
 jQuery(element_selector).css( styleParts[0].replace(/"/g, ''), styleParts[1]);

The replace is just to remove the double quotes from the style name.

However, in a future you may want to add more style rules (not just width), so I'd suggest you to add the brackets to the style rule (to become it JSON), so you'd have:

<span class="styleattributes" style="display:none">
  {"width": "100%", "backgroundColor": "red"}
</span>

If you do this change, you'd read the style like this:

 jQuery(element_selector).css( eval(style_attributes) );

(I'm using eval instead JSON.parse here because I assume you'll edit those css by hand and eval isn't as strict as JSON.parse).

Hope this helps. Cheers

Pointy · Accepted Answer · 2014-01-05 22:47:19Z

Storing stuff like that in hidden <span> attributes is problematic because the browser still pays attention to the contents. A better (well, safer; some people don't like it for reasons I don't really understand) way to stash stuff like that is to use <script> tags with a non-JavaScript "type" attribute:

<a class="styleswitch">Boxed
  <script type=text/my-selector class="elementselector">#page</script>
  <script type=text/css-styles class="styleattributes">{ "width": "1000px" }</script>
</a>

The browser will completely ignore that (except for any embedded closing </script> tags). You can still fetch the contents from jQuery:

jQuery(document).ready(function(){
    jQuery('a.styleswitch').click(function(){
      var element_selector = jQuery(this).find(".elementselector").html(),
        style_attributes = jQuery(this).find(".styleattributes").html());

    // alert('Set ' + element_selector + ' to ' + style_attributes + '');

    jQuery(element_selector).css( JSON.parse(style_attributes) );

    return false;
});

Note that I modified the style attribute block to be a JSON structure, so that it can be parsed and turned into a JavaScript object in your "click" handler.

edit I don't know who the downvoters are, but this is a really common practice for doing things like storing HTML templates and JSON blocks. All browsers worth worrying about (including mobile browsers) completely ignore the contents of <script> blocks with non-JavaScript "type" attributes. That means that the contents can contain HTML fragments without causing any problems.

I would say that using the script tag as you suggest is just marginally better than using a span. The browser still think's it's a script of some kind. <input type="hidden" /> should be used in a form for this stuff and if you just can't have a form, you can use custom attributes on an the a like <a data-element-selector class="... which is legal before HTML5 and is supported in HTML5. Otherwise, I agree with your answer.
@Bikonja yes, but when the "type" attribute is anything but one of the recognized JavaScript values, all browsers will completely ignore the content. That means it can contain things like < and > and malformed HTML without causing any problems and without requiring special escapes. This is a pretty common trick for including stuff like JSON blocks or templates.
I agree, that's why it is better than the span solution, but it's not future-proof. You might accidentaly set the type to something that will be used in the future and then you are going to have problems.
@Bikonja well, yes, it's possible that somebody will concoct a programming language with the MIME type "text/my-style-attributes", but I'm willing to take that chance :)
alrighty then, you stick to your non-forward-safe solution and I'll just be safe with backwards and forward compatible solution :) Cheers

Collectives™ on Stack Overflow

Passing variables to jquery .css() function

4 Answers 4

Comments

Comments

Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

5 Comments

Related