質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

5436閲覧

JavaScriptでデフォルトのstyleに戻す際空文字を指定するが、これはw3cの仕様に記述されていること?

yuji38kwmt

総合スコア437

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/06/06 14:59

JavaScriptでデフォルトのstyleに戻す際、以下のようにプロパティに空文字を指定します。

element.style.display = "";

この動作は、W3Cの仕様に書いてある内容でしょうか?
書いてある内容でしたら、そのURLを教えていただきたいです。

この動きは当然だと思っていましたが、後輩に伝える際、「そういえば仕様に書いてあるのだろうか?」と気になりました。

参考サイト

http://sutara79.hatenablog.com/entry/2014/07/08/000609

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ElementCSSInlineStyle Interface (CSSOM)

Interface ElementCSSInlineStyle は要素のインラインスタイルを提供し、style プロパティには Interface CSSStyleDeclaration が割り当てられています。

The ElementCSSInlineStyle interface provides access to inline style properties of an element.

``
[NoInterfaceObject]
interface ElementCSSInlineStyle {
[SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
};

Interface CSSStyleDeclaration (CSSOM)

以下、原文を引用。

partial interface CSSStyleDeclaration { [CEReactions, TreatNullAs=EmptyString] attribute CSSOMString _camel_cased_attribute; };

The camel-cased attribute attribute, on getting, must return the result of invoking getPropertyValue() with the argument being the result of running the IDL attribute to CSS property algorithm for camel-cased attribute.

Setting the camel-cased attribute attribute must invoke setProperty() with the first argument being the result of running the IDL attribute to CSS property algorithm for camel-cased attribute, as second argument the given value, and no third argument. Any exceptions thrown must be re-thrown.

上記(後半2文)の日本語訳。

取得子は、[ ( この属性の名前を CSS プロパティ名に変換した結果 ) を引数に これ°上の getPropertyValue() を呼び出した結果 ]を返さなければならない。
設定子は、 ( この属性の名前を CSS プロパティ名に変換した結果, 与えられた値 ) を引数に これ°上の setProperty() を呼び出さなければならない( 3 個目の引数は省略する) — 例外は再投出されなければならない。

今回、読むべきはsetterなので、**setProperty()**を読みます。

The setProperty(property, value, priority) method must run these steps:

  1. If the readonly flag is set, throw a NoModificationAllowedError exception and terminate these steps.
  2. If property is not a custom property, follow these substeps:
    (1) Let property be property converted to ASCII lowercase.
    (2) If property is not a case-sensitive match for a supported CSS property, terminate this algorithm.
  3. If value is the empty string, invoke removeProperty() with property as argument and terminate this algorithm.

this 値が空文字であるならば、removeProperty() を呼び出します。
removeProperty() は該当プロパティを削除する内部メソッドです。
従って、element.style.display = '' は display プロパティ値を削除し、該当要素の display 値を初期値に戻します。

CSSStyleDeclaration#removeProperty

余談。
element.style は空文字代入による初期化が広く知られていますが、CSSStyleDeclaration#removeProperty も知っておいて損はないと思います。

JavaScript

1document.querySelector('p').style.removeProperty('border');

更新履歴

  • 2017/06/14 21:14 ElementCSSInlineStyle, setProperty の説明を追記

Re: yuji38kwmt さん

投稿2017/06/06 15:13

編集2017/06/14 12:14
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuji38kwmt

2017/06/11 03:06

ありがとうございます。 すみません、具体的にどこに書いてあるのでしょうか? 英語が苦手でして。。。 `TreatNullAs=EmptyString`の部分でしょうか?
think49

2017/06/14 12:16

私も英文が苦手ですが、日本語訳と比較しながら読めば読めない事はないので、読みこなしの問題だと思います。 単純に読む時間が足りていません。 一文の英語を読むために1時間かける事もありますし、仕様を見つけるだけで数時間を費やすこともあります。 経験で解決できる為、頑張って何度でも読んでください。 親記事に追記しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問