3

これを JavaScript で実現したいと思います。

function changeAttributeValue(theAttribute, numberOfPixels)
{
    theAttribute = numberOfPixels + "px";
}

changeAttributeValue(myImage.style.left, 50);
changeAttributeValue(myImage.style.top, 80);
changeAttributeValue(myCanvas.width, 600);

最初の 2 つの呼び出しで画像を移動し、3 つ目の呼び出しでキャンバスの幅を調整します。

しかし、このままでは渡された変数の値だけが渡されたので、何も起こりません。

この問題を解決する方法を知っている人はいますか？

4

3 に答える 3

4

このようなことができます。

function changeAttributeValue(obj, propName, numberOfPixels) {
    obj[propName] = numberOfPixels + "px";
}

changeAttributeValue(myImage.style, "left", 50);
changeAttributeValue(myImage.style, "top", 80);
changeAttributeValue(myCanvas, "width", 600);
于 2012-08-18T00:39:10.350 に答える
3

さて、これが私の「解決策」です。

Jared Farrish のコメントに触発されています。つまり、これにより、使用可能な属性アクセス用の「ラッパー」getter/setter 関数が作成されます。ここではお勧めしませんが (必要以上に複雑なので)、他の場所で何か素晴らしいものに使用できる可能性があります。

function mkAccessor(obj, attribute) {
    return function (value) {
        if (arguments.length > 0) {
            obj[attribute] = value
        }
        return obj[attribute]
    }
}

function changeAttribute (accessor, value) {
    accessor(value)
}

changeAttribute(mkAccessor(myImage.style, "top"), 50)
changeAttribute(mkAccessor(myImage.style, "left"), 80)
var canvasWidthAccessor = mkAccessor(myCanvas, "width")
// somewhere later on
changeAttribute(canvasWidthAccessor, 600)
// or just
canvasWidthAccessor(600)

理論は正しいが、コードはテストされていない。YMMV。:-)

于 2012-08-18T00:44:32.253 に答える
2

コメントで提供したものを実際に投稿してコメントすると便利でしょう。

ウィット：

function setDim(attr, modifier, pix) {
    if (!modifier) {
        this[attr] = pix + 'px';
    } else {
        this[attr][modifier] = pix + 'px';
    }
}

さて、これはどのように機能しますか？はthisスコープを参照します。直接呼び出すだけの場合：

setDim('style', 'width', 50);

これは単にwindoworglobalスコープを呼び出します。el.call()実際、これはorを使用してスコープを渡すために構築されていますがel.apply()、多かれ少なかれ同じですが、引数を関数に渡す方法によって異なります。

あなたが本当にそれをどのように呼びたいか：

// Gives you the scope of the element #test1
var test = document.getElementById('test1');

次に、次のように「呼び出す」ことができます。

setDim.call(test, 'style', 'width', 50);

単なる属性 (プレーンでシンプル) の場合は、以下を渡すことに注意してくださいnull。

setDim.call(test, 'width', null, 50);

私はsetTimeout()効果のためにこのフィドルで使用しますが、必要ありません:

http://jsfiddle.net/userdude/tCz6j/2/

jQuery コア ソースを調べて、.apply()使用量を確認してください。これらの 2 つの方法は、「取得」すれば非常に便利です。

于 2012-08-18T01:21:52.267 に答える