BLOG

data属性の取得・設定・更新【JavaScript】

| JavaScript

data属性(data-*)の取得・設定・更新です。

data属性の取得方法

<div class="datasetnnoyatsu" data-num='1'></div>

// Javascript
const num = document.querySelector('.datasetnnoyatsu').dataset.num
console.log(num)

// jQuery
console.log($('.datasetnnoyatsu').data('num'));

data属性の設定・更新方法

<div class="datasetnnoyatsu" data-num='1'></div>

// Javascript
document.querySelector('.datasetnnoyatsu').dataset.num = 12345

// jQuery
$('.datasetnnoyatsu').data('num') = 12345

どちらも簡単ですね。
data属性はjsを触る際には結構便利ですから、覚えておくといいと思います。
微妙に忘れて困るのでメモ書き

RECENT POSTS

WordPressでIDから本文を取得する

[PHP] 配列内の空白を削除「array_filter」「array_diff」

[PHP] 配列内の同じ値をまとめる「array_unique」

WordPressのカスタムフィールドでソートする

連想配列から特定の値を取得して配列にいれちゃうってやつ

JavaScriptで取得するGETの値

【CSS】text-decorationのカスタマイズができるの知ってた?

CSSでフッターの下に隙間ができないように調整する

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

CATEGORY

POPULAR POSTS

PAGE TOP