0

htmlのdiv要素にプロパティのようなものを付け加えることはできませんか?

例えばdivがたくさんあって、
それぞれの固有のスピードでアニメーションさせたい時に、
div.speedXとかという感じで、
divにプロパティを持たせるということがしたいです。

var Box = function() {
  this.seepdX;
  this.speedY;
}

のようにBoxクラスを定義して、

var box = new Box();

というようにインスタンスを生成するような形にするとしても、

div要素とどんな形で関連づければいいのかがわかりません。

5
  • 質問としては別ですが、カスタムデータ属性のname設定について が参考になると思います。つまりそのように要素に属性を付加するには、カスタムデータ属性とアトリビュートを設定できます。
    – BLUEPIXY
    Commented 2017年7月19日 13:01
  • なるほど使えますね!ありがとうございます!data-speedX="100"という感じで自由につけられるのですね!それならjQuery側からも操作できますね!
    – aqua
    Commented 2017年7月19日 13:06
  • カスタムデータ属性の名前は大文字を使用することができません。
    – BLUEPIXY
    Commented 2017年7月19日 13:09
  • そうなのですね!なるほど、承知しました!!
    – aqua
    Commented 2017年7月19日 13:11
  • あと、jQueryからカスタムデータ属性を扱う場合は動作が一部異なる(オブジェクト内にキャッシュされる)( 例となる記事 )ことに気を付ける必要があります。
    – BLUEPIXY
    Commented 2017年7月19日 13:13

1 件の回答 1

2

方法というか手法はいくつかあります。

DOMオブジェクトにプロパティをセットする方法

質問からjsを前提としていると思われるので、まずこの方法が可能です。
任意のHTML要素に対応するDOMオブジェクトはそれ自体通常のjsにおけるオブジェクトですから、直接プロパティを定義することができます。

// HTMLにて
// <div id="target"></div>

const div = document.querySelector('#target');

// プロパティをセット
div.myProperty = 'myValue';

// プロパティを読み出し
console.assert(document.querySelector('#target').myProperty === 'myValue');

ただしこの方法はあまり推薦されません。理由としては次があります。

  • すでにあるプロパティとの名前の重複
  • DOMが実装としてこれらの値を保持するかは不明(注:未検証です)
  • そのプロパティがどのアプリケーションによって使用されているか不明瞭

オブジェクトからDOMオブジェクトを参照する

前述の問題を解決する手法として最も普遍的な解決策は、DOM要素を参照することです。
質問文にあるBoxクラスから<div>要素に対応するDOMオブジェクトを参照します。

// class Box
const Box = function(domElement) {
    // DOMオブジェクトを参照
    this.$el = domElement;
};

// インスタンスの生成は、コンストラクタに対象となるDOMオブジェクトを渡します
const box1 = new Box(document.createElement('div'));
const box2 = new Box(document.querySelector('div#target'));

このオブジェクトに対する操作を対象となる要素に適用する場合は、this.$elプロパティにセットされたDOM要素に対してなんらかの処理を行うようにします。

// for example
Box.prototype.move = function (duration) {
    this.$el.style.left += this.speedX * duration;
    this.$el.style.top += this.speedY * duration;
};

(補足)HTMLのcustom data attributeを用いる方法

こちらはあまりjs的でないソリューションで、限定的ですが使われるケースもあるので紹介しておきます。
具体的には、data-[独自のプロパティ名]で定義されるプロパティをHTML要素に設定します。
この手法も「DOMオブジェクトにプロパティをセットする方法」で述べた欠点を持ちますが、HTMLが書き換わっていたほうが都合がいい(あとで使う場合や、アプリケーション間の連携など?)では有効な場合があります。
操作はjsで行う場合Element.getAttribute/Element.setAttributeメソッドを使う方法、HTMLElement.datasetプロパティを経由してアクセスする方法があります。

const example = document.createElement('div');

// setAttributeを用いて独自プロパティを定義
example.setAttribute('data-myProperty', 'myValue');

// getAttributeを用いて独自プロパティを読み出し
console.assert(example.getAttribute('data-myProperty') === 'myValue');
// or
console.assert(example.dataset.myProperty === 'myValue');

個人的な見解としては、特別な事情がある場合(どうしてそうする必要があるか説明できる場合)を除いて、二番目の方法をおすすめします。以上、参考になれば幸いです。

3
  • ありがとうございます!そういう方法があるのですね!ちなみにご教示いただいた2番目の方法で、Boxインスタンスをつくる時は、Box(domElement)と書けば良いのでしょうか?初歩的な質問で恐縮なのですが。
    – aqua
    Commented 2017年7月19日 14:08
  • たとえば、今回の回答の例では、コンストラクタに任意のDOMオブジェクトを渡すことができます(本来ならdomElementがDOMオブジェクトであるかチェックすべきですが、省略しています)。追記しましたのでご確認ください。
    – user15182
    Commented 2017年7月19日 14:18
  • なるほど!丁寧にありがとうございます!試してみます!
    – aqua
    Commented 2017年7月19日 14:19

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。