readonly、disabled、display、visible の違いの詳細な説明-CSSチュートリアル-php.cn

readonly、disabled、display、visible の違いの詳細な説明

小云云

リリース： 2017-12-04 13:16:15

オリジナル

2397 人が閲覧しました

この記事では、readonly、disabled、display、visibleの違いを中心に詳しく解説しています。 CSSのスタイル設定には、同じ機能を持ちながら表現形式が少し異なる属性がいくつかあります。今日jsでオブジェクトのスタイル属性を変更してみたところ、displayとvisibleは同じように見えて実はあることが分かりました。ちなみに、ここでは、readonlyとdisabledの違いも共有します。

displayとvisibleの違い:

(1) まず第一に、display:noneとvisible:hiddenはどちらもWebページ上の要素を非表示にすることができます。

(2) スタイルファイルやページファイルのコード内で、display:noneを直接使用して要素を非表示にした場合、ページを読み込んだ後、要素を表示するためのjsによるスタイルの設定を行わずに、jsコードが正しく取得されません。この要素の一部の属性 (offSetTop、offSetLeft など) は値 0 を返します。これらの値は、要素を表示するために js で style.display を設定した後にのみ正しく取得できます。

(3) display:none を使用して非表示にした要素は、Baidu などの検索サイトでは取得されません。これは Web サイトの SEO に影響します。場合によっては、left:-100000px を使用して同じ効果を得ることができます。

(4) 要素の display:none スタイルがスタイルファイルまたはで設定されている場合、js で style.display="" を設定しても要素は表示されません。代わりにブロックまたはインラインの同等の値を使用します。 style="display:none" を介して要素に直接設定すると、この問題は発生しません。

(5) 要素を display:none に設定すると、非表示のオブジェクト用に物理的なスペースが予約されなくなります。つまり、オブジェクトはページ上で完全に消え、見ることも触れることもできなくなります。要素を Visibility:hidden に設定すると、Web ページ上でオブジェクトが非表示になるだけですが、Web ページ上でオブジェクトが占めるスペースは変化しません。平たく言えば、オブジェクトは表示されませんが、触れることはできます。

読み取り専用と無効の違い:

(1) 読み取り専用と無効はどちらも、ユーザーがフォームフィールドのコンテンツを変更できないようにします。

(2) disabled 属性と readonly 属性の両方が true に設定されている場合、form 属性は編集できません。

(3) 入力項目の無効が true に設定されている場合、フォーム入力項目はフォーカスを取得できず、入力項目に対するユーザーのすべての操作 (マウスのクリックやキーボード入力など) が無効になります。 Readonly は、テキストを入力できるテキスト入力ボックスなどの入力項目のみを対象としています。true に設定すると、ユーザーは対応するテキストを編集できなくなりますが、フォーカスすることはできます。

(4) Readonly は入力 (テキスト/パスワード) と textarea にのみ有効で、disabled は html のすべてのフォーム要素に有効ですが、form 要素が disabled を使用した後、フォームの POST または GET メソッドを使用する場合、送信後に、この要素の値は送信されませんが、読み取り専用に設定されたフォーム要素の値は引き続き送信されます。より一般的に使用される状況は次のとおりです:

(1) 一意の識別コードがユーザーのフォームに事前に入力されており、ユーザーはそれを変更することはできませんが、送信時に値とその属性を渡す必要があります。現時点では読み取り専用に設定する必要があります。

(2) ユーザーがフォームを正式に送信すると、管理者による情報の検証を待つ必要があることがよくあります。これにより、ユーザーはフォーム内のデータを変更できなくなり、表示のみが可能になります。 .disabled には幅広い要素があるため、このときは disabled を使用する必要がありますが、同時に、ユーザーがこのボタンを押している限り、送信ボタンを無効にすることに注意する必要があります。データベース操作ページで整合性チェックを行わないと、データベース内の値がクリアされます。この場合、無効ではなく readonly を使用しても、フォーム内に input (text/password) 要素と textarea 要素しかない場合は、select などの他の要素がある場合でも、ユーザーは値を書き換えて押すことができます。 Enter キーを押して送信します (Enter はデフォルトの送信トリガーキーです)。

(3) ユーザーが送信ボタンを押した後、JavaScript を使用して送信ボタンを無効にすることがよくあります。これにより、ネットワーク状態が悪い環境でユーザーが送信ボタンを繰り返しクリックすることを防ぎ、データがデータベースに重複して保存されます。。

上記の内容は、readonly、disabled、display、visible の違いを詳しく説明したものであり、皆様のお役に立てば幸いです。