

簡単な問題なのですが、うまくいかないので質問させていただきます。

例えば  
ウィンドウの高さが1000pxのとき

[code]

    <div data-1000="a">
    
[/code]

ウィンドウの高さが500pxのとき

[code]

    <div data-500="a">
    
[/code]

上記のようにHTMLのカスタムデータ属性のnameにウィンドウの高さを付与したいのですが、うまくいきません。  
分かる方よろしくお願いいたします。


CC BY-SA 3.0
2017-06-07T08:55:36.173
35366
2017-07-11T15:11:01.490
2017-06-07T08:56:40.690
5044
23622
question
javascript
カスタムデータ属性のname設定について


色々はっきりしない部分はありますが  
こんな感じですかね。

[code]

    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);
[/code]

[code]

    <div id="it">...</div>
[/code]

参照：[独自データ属性](http://www.html5.jp/tag/attributes/data.html)

ノート：  
属性名として「使用出来る文字について数字で始まる名前が使用できる」と指摘があったので、  
改めて調べて見ました。

> 独自データ属性は、名前空間に属さない属性で、その名前は文字列 "data-" で始まり、ハイフンの後に少なくとも一文字が続きます。これは  
>  XML 互換で、ASCII 大文字 を含みません。

[原文](https://www.w3.org/TR/2014/REC-html5-20141028/dom.html#embedding-custom-
non-visible-data-with-the-data-*-attributes)：

> .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](https://www.w3.org/TR/2014/REC-
> html5-20141028/infrastructure.html#xml-compatible), and contains no
> uppercase ASCII letters.

XML 互換(XML-compatible)の名前

> Attribute names are said to be XML-compatible if they match the
> [Name](https://www.w3.org/TR/xml/#NT-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):

>
[code]

>     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)*
>  
[/code]

これから、「名前」が数字から始まってはいけない。xmlで始まってはいけない、コロン(:)や記号は使えないとなります。  
この[サイト](https://www.marguerite.jp/Nihongo/WWW/RefHTML/Attrs/data-
XXX.html#ATTR_NAME)がわかりやすいです。

なので、「規格上は数字で始まる名前は使用できない」ということになると思います。  
数字を指定しても動作する(Chromeで試してみました）のは、  
おそらく、data-
を含めた全体としてはhtml5の属性名としてバリッド（なので、setAttributeを使う場合にはＯＫ）だからじゃないかと思いますが、使用しない方がいいです。


CC BY-SA 3.0
2017-06-07T09:12:02.180
35367
2017-06-08T09:18:42.057
2017-06-08T09:18:42.057
5044
5044
35366
answer