web-dev-qa-db-ja.com

data-targetおよびdata-slide-to属性とは何ですか？

私はブートストラップを使用しています（これは初めてです）。この2つの属性が見つかりました。誰かに説明してもらえますか？

htmlcsstwitter-bootstrapfrontend
22
Xinrui Ma

@Larsenalのポイントを進めるために、カスタムデータ属性は開発者にとって非常に便利です。仕様が言うように：

カスタムデータ属性は、ページまたはアプリケーション専用のカスタムデータを格納することを目的としており、適切な属性または要素はありません。これらの属性は、属性を使用するサイトに依存しないソフトウェアによる使用を目的としていません。

使用例には以下が含まれます：

後にJSで変更される可能性のある初期の高さ/幅を保存します。 JavaScriptを介してこれらの属性を取得および設定する簡単な方法があります-getAttributeおよびsetAttributeを使用します。

 <div id='strawberry-plant' data-fruit='12'></div>
 <script>
    // 'Getting' data-attributes using getAttribute
    var plant = document.getElementById('strawberry-plant');
    var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'
 </script>

ただし、覚えておいてください、これはnotgood practice。したがって、dataset properties。

データ属性の詳細については、こちらをご覧ください： http://html5doctor.com/html5-custom-data-attributes/

JavaScript開発者として（またはそうでないかもしれない）彼らに恋をするでしょう。

18
Watchful Protector

表示される属性は、カスタムデータ属性です。それらはdata-*。

「data-」プレフィックスを持つものはすべて、ブラウザでレンダリングされないカスタムデータを格納するために使用されます。

だからあなたはこれを持つことができます：

<div data-foo="ABC" data-bar="123">Hello World</div>

通常、JavaScriptからこのデータを読み戻し、それを使用して処理を行います。

12
Larsenal

この場合、これらは carousel component に設定するために使用される変数です。

データ属性を使用して、カルーセルの位置を簡単に制御します。 data-slideは、キーワードprevまたはnextを受け入れます。これらは、現在の位置に関連してスライドの位置を変更します。または、data-slide-toを使用して生のスライドインデックスをカルーセルdata-slide-to="2"に渡します。これにより、スライド位置が0で始まる特定のインデックスに移動します。

HTML5 data-属性の詳細を読む 。

5
Blazemonger