JavaScriptでデフォルトのstyleに戻す際、以下のようにプロパティに空文字を指定します。
element.style.display = "";
この動作は、W3Cの仕様に書いてある内容でしょうか?
書いてある内容でしたら、そのURLを教えていただきたいです。
この動きは当然だと思っていましたが、後輩に伝える際、「そういえば仕様に書いてあるのだろうか?」と気になりました。
参考サイト
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答1件
0
ベストアンサー
ElementCSSInlineStyle Interface (CSSOM)
- 7.1. The ElementCSSInlineStyle Interface - CSS Object Model (CSSOM)
- 7.1. ElementCSSInlineStyle インタフェース - CSS Object Model (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)
- 6.6.1. CSSStyleDeclaration インタフェース - CSS Object Model (CSSOM) (日本語訳)
- 6.6.1. The CSSStyleDeclaration Interface - CSS Object Model (CSSOM) (Editor’s Draft 2017/06/07)
- 5.6.1. The CSSStyleDeclaration Interface - CSS Object Model (CSSOM) (Working Draft 2016/03/17)
以下、原文を引用。
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:
- If the readonly flag is set, throw a NoModificationAllowedError exception and terminate these steps.
- 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.- 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総合スコア18156
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/11 03:06
2017/06/14 12:16