JSでHTML本文のスタイルを変更する

JSでHTML本文のスタイルを変更する

1. 本来の定義

まずCSSで定義します: bodyhtml幅と高さは300pxです

本文、html {
   幅: 300ピクセル;
   高さ: 300px;
}

2. JS操作、幅の変更を例に

// 本文と HTML ノードのスタイルを取得します (ここでは主に HTML ですが、最初は取得方法が明確ではありません)
bodyStyle = document.body.style とします。
htmlStyle = document.getElementsByTagName('html')[0].style とします。

// ブラウザの幅を取得します。幅は任意の値に設定することもできます。let width = document.documentElement.clientWidth || document.body.clientWidth

// ボディの幅をリセット bodyStyle.width = `${width}px`

// HTML の幅をリセット htmlStyle.width = `${width}px`

// または、次のような他のスタイルの変更:
htmlStyle['min-width'] = `${width}px`

3. 効果: 幅が変更されました

これで、JS で HTML 本文のスタイルを変更する方法についての記事は終了です。JS で HTML 本文のスタイルを変更する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • HTML と CSS スタイルを組み合わせて JS 食品プロジェクトのホームページのサンプル コードを作成する
  • HTML+CSS+JavaScript でガールフレンド版のスクラッチ カードを作成します (一度見ればすぐに覚えられます)
  • JavaScript での HTML キャンバスとページ ストレージ テクノロジの使用に関する詳細な説明
  • 登録ページを実装するためのJS、CSS、HTML
  • SpringMVC @RequestBody 日付型 Json 変換メソッド
  • C# は HttpWebRequest を通じて JSON 本文を含む POST リクエストを送信します。
  • @RequestBody が json オブジェクトを受信して​​エラー 415 を報告する問題を解決する
  • @RequestBodyとJsonの関係についてお話しましょう

<<:  HTMLテキスト内のすべてのタグを置き換える方法

>>:  Tomcat を使用して Centos 環境に SpringBoot WAR パッケージをデプロイする

推薦する

Ubuntu で中国語入力方法が使えない場合の解決策

Ubuntu では中国語入力方法の解決策はありません。仮想マシンや Ubuntu システムをインスト...

Linux mpstat コマンドの使用方法の詳細な説明

1. mpstatコマンド1.1 コマンド形式 mpstat [ -A ] [ -u ] [ -V ...

Vue3 の SetUp 関数のプロパティとコンテキスト パラメータの詳細な説明

1. setUp関数の最初のパラメータpropsセットアップ(プロパティ、コンテキスト){}最初のパ...

aタグに下線を付け、クリック前後で色を変える方法

コードをコピーコードは次のとおりです。リンクフォントサイズ: 12px;色: #000000;テキス...

vue3.0プロジェクトアーキテクチャを段階的に構築する方法を教えます

目次序文: 1. vue-cliでプロジェクトを作成する2. ルーターをインストールする3. ディレ...

JDBC が MySQL に接続して中国語を処理するときに文字化けする問題の解決方法の詳細説明

JDBC が MySQL に接続して中国語を処理するときに文字化けする問題の解決方法の詳細説明最近、...

Element における複数データ読み込み最適化の実装

目次シナリオコードの実装要約:シナリオ最近、ElementUI をベースにしたバックグラウンド管理シ...

Javascriptジェネレータの紹介と使用

ジェネレータとは何ですか?ジェネレーターは関数内で実行されるコードです。値を返した後、一時停止し、呼...

Vue のフィルターの適用シナリオの詳細な説明

filterは通常、特定の値をフィルターするために使用されます。たとえば、フィールドが空だが、フロン...

MySQL SHOW PROCESSLISTはトラブルシューティングの全プロセスを支援します

1. SHOW PROCESSLISTコマンドSHOW PROCESSLIST は実行中のスレッド ...

MySQLがサブクエリと結合の使用を推奨しない理由

ページ分割されたクエリを実行するには: 1. MySQL の場合、サブクエリと結合の使用は推奨されま...

HTML メタの説明

導入メタタグは、HTML言語のHEAD領域にある補助タグです。 meta は、ページの説明、キーワー...

ラベルとボタンを削除し、背景画像の点線/影を追加すると完璧な解決策になります

ユーザーが登録すると、ラベルをクリックして確認コードを変更します。クリックするとラベルに影の部分がで...

CocosCreatorオブジェクトプールの使い方

目次序文:特定の操作ステップ1: プレハブを準備するステップ2: オブジェクトプールを初期化するステ...

nginx リバース プロキシの魔法のスラッシュについての簡単な説明

nginx リバース プロキシを設定する場合、location と proxy_pass のスラッシ...