javascript - jquery の attr() メソッドにオブジェクトを値として設定する

Question

関数を使用し$.data()てdivのサイズを設定しています:

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

次のような値を取得しています。

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

コードは問題なく、機能しています。$.attr()関数を介して行うことが可能かどうか、またどの方法が良いかを知りたいです。

Answer 1

次のように簡単に処理できます。

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

Answer 2

これは、いくつかの追加機能を備えた同様の動作を作成する関数を誰かが追加した例です。

フィドル

// 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;
};