ホームページ ウェブフロントエンド jsチュートリアル jsでコントロールを非表示にする方法と表示属性_javascriptスキルの紹介

jsでコントロールを非表示にする方法と表示属性_javascriptスキルの紹介

May 16, 2016 pm 05:30 PM
display 属性

JavaScript を使用してコントロールを非表示にする方法は 2 つあります。1 つは、コントロールのスタイルの「display」属性と「visibility」属性を設定する方法です。コントロールは、style.display="block" または style.visibility="visible" の場合に表示され、style.display="none" または style.visibility="hidden" の場合は非表示になります。違いは、「表示」によってコントロールが非表示になるだけでなく、非表示のコントロールは表示時に占められていた位置を占めなくなるのに対し、「可視性」によって隠されたコントロールはコントロールを非表示に設定するだけで、コントロールは依然として元の位置を占めることです。位置。

コードをコピー コードは次のとおりです。

function displayHideUI()
{
var ui = document.getElementById("bbs");
ui.style.display="none";
}
function displayShowUI()
{
var ui = document. getElementById(" bbs");
ui.style.display=" ";//ディスプレイが空の場合に機能し、ブロックにより次のスペースがラップされます。
}
functionibilityHideUI( )
{
var ui = document.getElementById("bbs");
ui.style.visibility="hidden";
}
function VisibilityShowUI()
{
var ui = document.getElementById("bbs");
ui.style.visibility="visible";
}


display: 値の説明 None の要素は表示されません。
block この要素はブロックレベルの要素として表示され、この要素の前後に改行が入ります。
インラインがデフォルトです。この要素は、要素の前後に改行のないインライン要素として表示されます。
inline-block インラインブロック要素。 (CSS2.1での新しい値)
list-item この要素はリストとして表示されます。
run-in この要素は、コンテキストに応じて、ブロックレベル要素またはインライン要素として表示されます。
compact CSS CSS には Compact という値がありますが、広くサポートされていないため、CSS2.1 から削除されました。
マーカー CSS には値マーカーがありますが、広くサポートされていないため、CSS2.1 から削除されました。
table この要素は、ブロックレベルのテーブル ( と同様) として表示され、テーブルの前後に改行が入ります。
inline-table この要素は、表の前後に改行を入れずに、インライン表 (
と同様) として表示されます。
table-row-group この要素は、1 つ以上の行のグループとして表示されます ( と同様)。
table-header-group この要素は、1 つ以上の行のグループとして表示されます ( と同様)。
table-footer-group この要素は、1 つ以上の行のグループとして表示されます ( と同様)。
table-row この要素はテーブル行として表示されます ( と同様)。
table-column-group この要素は、1 つ以上の列のグループとして表示されます (と同様)。
table-column この要素はセルの列として表示されます (と同様)
table-cell この要素は表のセルとして表示されます (
および と同様) )
table-caption この要素は表のタイトルとして表示されます (
と同様)
inherit は、表示属性の値が親要素から継承されることを指定します。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

富士フイルム X-M5 の価格予想が上昇、自撮りディスプレイの流出で以前は手頃な価格だったカメララインが複雑化 富士フイルム X-M5 の価格予想が上昇、自撮りディスプレイの流出で以前は手頃な価格だったカメララインが複雑化 Sep 07, 2024 am 09:34 AM

富士フイルムのファンは最近、X-T50 の登場に非常に興奮していました。X-T50 は、1,000 ドル以下の APS-C カテゴリーで非常に人気となっていた低価格志向の富士フイルム X-T30 II の再発売を提示したからです。残念ながら、富士フイルム X-T50 の発売に伴い

Python の dir() 関数: オブジェクトのプロパティとメソッドを表示する Python の dir() 関数: オブジェクトのプロパティとメソッドを表示する Nov 18, 2023 pm 01:45 PM

Python の dir() 関数: オブジェクトのプロパティとメソッドを表示します。特定のコード サンプルが必要です。 要約: Python は強力で柔軟なプログラミング言語であり、その組み込み関数とツールは開発者に多くの便利な機能を提供します。非常に便利な関数の 1 つは dir() 関数です。これを使用すると、オブジェクトのプロパティとメソッドを表示できます。この記事では、 dir() 関数の使用法を紹介し、具体的なコード例を通じてその機能と使用法を示します。テキスト: Python の dir() 関数は組み込み関数です。

サムスン:E Ink テクノロジーをベースにした新しい大型ディスプレイは色を表示し、ワイヤレスで通信します サムスン:E Ink テクノロジーをベースにした新しい大型ディスプレイは色を表示し、ワイヤレスで通信します Jun 19, 2024 pm 03:37 PM

私たちは、電子書籍リーダーなど、電子インクを搭載したディスプレイをベースにしたデバイスについて頻繁にレポートしています。この技術には多くの利点があります。バックライトなしで明るい環境でも読み取ることができ、光がない状態でスイッチングするときのみ電力が必要です。

表示にはどのような値がありますか? 表示にはどのような値がありますか? Nov 20, 2023 pm 05:28 PM

表示の値には、block、inline、none、inline-block、flex、grid、table、inline-table、list-item が含まれます。詳細な紹介: 1. block: 要素をブロックレベルの要素にレンダリングします。ブロックレベルの要素はページ上のブロックを形成し、1 行だけを占有します。2. inline: 要素をインライン要素にレンダリングします。インライン要素は、それ自体では 1 行を占有せず、他の要素と並べることができます。3. none、この値は、要素がページ上にないことを指定します。

それが何を意味するのかを表示する それが何を意味するのかを表示する Oct 26, 2023 am 11:50 AM

ディスプレイとは通常、何らかの方法でデータ、情報、結果をユーザーに表示するか、画面やその他のデバイスに出力する操作または機能を指します。具体的な意味: 1. コマンド ライン インターフェイス (CLI) では、表示とは、ユーザーが表示または分析できるように、テキスト、テーブル、またはその他の形式でデータを端末ウィンドウに出力することを指す場合があります; 2. グラフィカル ユーザー インターフェイス (GUI) では、表示ユーザーの対話やブラウジングなどのために、アプリケーション ウィンドウまたはインターフェイス上に画像、テキスト、グラフ、その他のコンテンツを表示することを指す場合があります。

CSSのbottom属性構文 CSSのbottom属性構文 Feb 21, 2024 pm 03:30 PM

CSS の Bottom 属性の構文とコード例 CSS では、bottom 属性は要素とコンテナの下部の間の距離を指定するために使用されます。親要素の下部を基準とした要素の位置を制御します。ボトム属性の構文は次のとおりです: element{bottom:value;} ここで、element はスタイルが適用される要素を表し、value は設定されるボトム値を表します。 value にはピクセルなどの特定の長さの値を指定できます

Google Pixel 8 のディスプレイの問題: 修理プログラムにより 3 年間の無料サービスが可能 Google Pixel 8 のディスプレイの問題: 修理プログラムにより 3 年間の無料サービスが可能 Jun 15, 2024 pm 06:50 PM

GooglePixel 8 (Amazon で約 513 ユーロ、期間限定セール) の発売以来、ディスプレイの縦線に関する苦情のユーザーからの報告が増加しています。これは色や色など、さまざまな形で現れる可能性があります。

Google Pixel 9 Pro XLがDxOMarkの「グローバル」スマートフォンカメラランキングで2位にランクイン Google Pixel 9 Pro XLがDxOMarkの「グローバル」スマートフォンカメラランキングで2位にランクイン Aug 23, 2024 am 06:42 AM

Google の新しい Pixel 9 シリーズには、以前のラインナップには存在しなかった新しいバリエーションである Pixel 9 Pro XL が導入されました。これは基本的に非 XL バージョン (Amazon で予約注文) と同じですが、名前が示すように、画面が大きくなっています。二人は

See all articles