Setting object as value to attr() method in jquery

Question

I'm using $.data() function to set the size of a div:

function init() {
    comp = $("#center");
    comp.data('image', {
        dimensions : {
            width : comp.width(),
            height : comp.height(),
            x0 : comp.position().left,
            y0 : comp.position().top,           
        }
    });
}

I'm retrieving the value like:

var image = comp.data('image');
alert(image.dimensions.x1);

The code is fine and it's working too. I would like to know if it is possible to do via $.attr() function and which way would be better.

Have you tried? It's obviously not possible due to the fact that attributes can only be strings. — Kevin B, Aug 30 '13 at 14:28
But jQuery cache can contain non-string values, so it's not that obvious. — Virus721, Aug 30 '13 at 14:30

score 1 · Answer 1 · answered Aug 30 '13 at 14:36

1

you can handle this easily like that:

var values = {width: '100px', height: '100px'};
$('#id-of-your-img').css(values);

answered Aug 30 '13 at 14:36

Daniel Faria

1,476
5
24
45

score 0 · Answer 2 · answered Aug 30 '13 at 14:31

0

You can try a attr("style", ""), but I would prefer to use css() for CSS manipulation. See here: http://api.jquery.com/css/

answered Aug 30 '13 at 14:31

mvw

5,075
1
28
34

score 0 · Answer 3 · answered Aug 30 '13 at 14:38

Here is a example where someone added a function to create a similar behaviour with some extra features.

FIDDLE

// dispatch to data() and attr()
$.fn.dataAttr = function(key, value) {
    var $this = this,
        ret = this.data(key, value);

    if (typeof key == "object") {
        $.each(key, function(key, value) {
            $this.attr("data-" + jQuery.uncamelCase(key), typeof value in {string:1, number:1} ? value : '~defined~');
        });
    } else if (value !== undefined) {
        $this.attr("data-" + jQuery.uncamelCase(key), typeof value in {string:1, number:1} ? value : '~defined~');
    }

    return ret;
};

Setting object as value to attr() method in jquery

3 Answers3