Hatena Blog Tags
はてなブログ トップ
カスタムデータ属性
このタグでブログを書く

カスタムデータ属性

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
Multi Vitamin & Mineral•昨年

「カスタムデータ属性（data-*）」と「script タグへの JSON 埋め込み」のススメ【JavaScript で扱うデータを HTML に埋める方法2選】

ブラウザに表示されているデータは HTML 上にあり、 JavaScript から取得できるます。これはいいんです。が、ブラウザに表示されないが、JavaScript で扱いたいデータがあった場合は HTML のどこに書くのがよいのでしょう？ というのが今回のテーマです。 方法はいくつかあるのですが、私が良さそうと思った2つの方法を書いています。 結論 今回取り上げる問題 表示データ＝取得したいデータ（問題のないパターン） 表示データ≠取得したいデータ（問題のあるパターン） その1 : カスタムデータ属性（data-*）の利用（対応要素がある場合） カスタムデータ属性（data-*）と利用例 …

#JavaScript#カスタムデータ属性#JSON#HTML

関連ブログ

Study Blog•3 か月前

クロスサイトスクリプティング ( XSS )

書籍を読んで クロスサイト・スクリプティング(XSS) 必須対策 共通対策 PHPでの開発の場合 実際のプログラミング 攻撃手法 保険対策 JavaScriptの文字列リテラルの動的生成の対策 HTMLタグやCSSの入力を許す場合の対策 エラーメッセージからの情報漏洩 書籍を読んで www.amazon.co.jp こちらの書籍を読んでWebアプリケーションを作る際に重要な要点を自分用としてアウトプットします。 クロスサイト・スクリプティング(XSS) 通常、Webアプリケーションには外部からの入力などに応じて表示が変化する箇所があり、この部分のHTMLの生成の実装に問題があると、XSSという…

Rails Diary•5 か月前

編集・削除ボタンの実装

課題の反省点 削除にdestroy!を使用していない。 コメントがついた投稿は削除させないといった制約がある時を除き、基本的にある投稿の削除が失敗することは考えられないので、失敗を想定していないなりの処理を記載する →削除失敗が想定されない場合、destroy!と記載することで万が一に失敗した場合はシステムエラーとして処理を中断させ、おかしな挙動のまま機能を使わせない様にする。 編集・削除ボタンの表示判定ロジックをboard.rb側に新たに作成していたが、user.rbに作った判定ロジックを汎用できるので無駄な記述となった。 コメントの編集・削除ボタン表示の際に用いた下記のロジックがそのまま使…

find-tips•6 か月前

クリックした要素のカスタムデータ属性「data-●●="####"」の「####」値を取得する

クリックした要素の「カスタムデータ属性」を取得します。 要素に設定された、「data-●●="####"」という属性の「#####」を取得することができます。 使い所の例 チャットアプリで、メッセージを削除したいときをイメージしてます。 各メッセージに割り当てられたIDを取得して、データベースとやり取りしたい場合を想定します。 サンプルコード（初期状態） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> …

メモ帳•7 か月前

親のチェックボックスに紐付けたチェックボックスを全てチェックする

親のチェックボックスのチェック状態を親に紐付けた子供のチェックボックスにも反映させたい ↓こういうやつ これをピュアJSで書いたときの備忘録 コード 解説 HTML 親チェックボックスに子供を紐付ける用のカスタムデータ属性(data-id="1")をつける (親であることを判別できるのであればclass名などで管理してもOK) <label>親チェック1<input type="checkbox" data-id="1" class="check-parent"></label> 親に紐付ける子供となるチェックボックスに親のid(data-parent-id="1")を紐付ける <label>…

ハッピーメモメモ•8 か月前

【JavaScript】要素をさわる

○要素の取得-1（id） document.getElementById('id名') 例）html <p id="choice">ここに日時を表示します</p> JavaScript console.log(document.getElementById('choice')); ○要素の取得-2（cssセレクタ） document.querySelector('CSSセレクタ') 例）HTMLのボタンをクリックしたら、コンソールに文字を表示する const button = document.querySelector('button')!; button.addEventListener(…

Rのつく財団入り口•9 か月前

【感想】『りあクト！ TypeScriptで極める現場のReact開発』： #りあクト でさらに極めるReact道

秋谷さんのビジュアル判明。悪戯好き元気スポーツ少女系でポニテ！(違) 技術同人誌の『りあクト！』３部作を読んだので、続編、追補編にあたる『りあクト！ TypeScriptで極める現場のReact開発』を読みました。

三日坊主がサイトを作るまで•10 か月前

SVG画像の使い方

使うことが増えてきたSVG画像。 曖昧だった部分をまとめました。 SVGとは SVG（Scalable Vector Graphics）です。 拡大縮小できるベクター画像。 SVGがベクトル形式なのに対し、JPEG、PNG、GIFはビットマップ形式でラスター画像です。 Illustratorに出てくる「ラスタライズ」は、パスデータや埋め込み・リンク画像をラスター画像にします。 Photoshopにに出てくる「ラスタライズ」は、テキストレイヤーやシェイプレイヤー、レイヤースタイルなどをラスター画像にします。 パスになっているものはSVGに書き出せます。 （※テキストはそのままSVGに書き出せるの…