簡単な問題なのですが、うまくいかないので質問させていただきます。
例えば
ウィンドウの高さが1000pxのとき
<div data-1000="a">
ウィンドウの高さが500pxのとき
<div data-500="a">
上記のようにHTMLのカスタムデータ属性のnameにウィンドウの高さを付与したいのですが、うまくいきません。
分かる方よろしくお願いいたします。
色々はっきりしない部分はありますが
こんな感じですかね。
var height = window.innerHeight;
var theDiv = document.getElementById("it");
//setAttributeを使う場合
var att_name = "data-" + height;
theDiv.setAttribute(att_name, "a");
console.log(theDiv.getAttribute(att_name));
console.log(theDiv.outerHTML);
theDiv.removeAttribute(att_name);//削除
console.log(theDiv.outerHTML);
//dataset IDL属性の場合
var name = "h" + height;//数字で始まる名前は使用できない。
theDiv.dataset[name]="a";
console.log(theDiv.dataset[name]);
console.log(theDiv.outerHTML);
<div id="it">...</div>
参照:独自データ属性
ノート:
属性名として「使用出来る文字について数字で始まる名前が使用できる」と指摘があったので、
改めて調べて見ました。
独自データ属性は、名前空間に属さない属性で、その名前は文字列 "data-" で始まり、ハイフンの後に少なくとも一文字が続きます。これは
XML 互換で、ASCII 大文字 を含みません。
原文:
.2.5.9 Embedding custom non-visible data with the data-* attributes
A custom data attribute is an attribute in no namespace whose name
starts with the string "data-", has at least one character after the
hyphen, is XML-compatible, and contains no uppercase ASCII letters.
XML 互換(XML-compatible)の名前
Attribute names are said to be XML-compatible if they match the Name
production defined in XML, they contain no ":" (U+003A) characters,
and their first three characters are not an ASCII case-insensitive
match for the string "xml". [XML]
ここで言う
名前(Name):
NameStartChar ::= ":" | [A-Z] | "_" | [a-z] | [#xC0-#xD6] | [#xD8-#xF6] | [#xF8-#x2FF] | [#x370-#x37D] | [#x37F-#x1FFF] | [#x200C-#x200D] | [#x2070-#x218F] | [#x2C00-#x2FEF] | [#x3001-#xD7FF] | [#xF900-#xFDCF] | [#xFDF0-#xFFFD] | [#x10000-#xEFFFF] NameChar ::= NameStartChar | "-" | "." | [0-9] | #xB7 | [#x0300-#x036F] | [#x203F-#x2040] Name ::= NameStartChar (NameChar)*
これから、「名前」が数字から始まってはいけない。xmlで始まってはいけない、コロン(:)や記号は使えないとなります。
このサイトがわかりやすいです。
なので、「規格上は数字で始まる名前は使用できない」ということになると思います。
数字を指定しても動作する(Chromeで試してみました)のは、
おそらく、data-を含めた全体としてはhtml5の属性名としてバリッド(なので、setAttributeを使う場合にはOK)だからじゃないかと思いますが、使用しない方がいいです。