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 パッケージをデプロイする

推薦する

HTML ハイパーリンク スタイル (4 つの異なる状態) の設定例

コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...

Dockerはdockerfileを使用してnode.jsアプリケーションを起動します

Dockerfileの作成expressによって自動的に作成されたディレクトリを例にとると、ディレク...

LinuxにNginxをインストールする正しい手順

序文私のように、Java バックエンドに勤勉な人であれば、多数のプロジェクト機能を実装することに加え...

Hyper-V インストール CentOS 8 の問題の分析

CentOS 8 がリリースされてから随分経ちました。Linux 仮想マシンをいじっている人間として...

MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)

公式 MySQL Web サイトから Ubuntu Linux 用の最新バージョンの MySQL を...

Linux システムで .sh ファイルを実行する方法

Linux システムで .sh ファイルを実行する方法は 2 つあります。たとえば、ルート ディレク...

Linux で MySQL をインストールして設定する

システム: Ubuntu 16.04LTS 1\公式サイトからmysql-5.7.18-linux-...

高品質なコードを書く Web フロントエンド開発実践書の抜粋

(P4) Web 標準は一連の標準で構成されています。中心となる概念は、Web ページの構造、スタイ...

Nginx 構成 SSL および WSS 手順の紹介

目次序文1. Nginxのインストール1. Nginxをダウンロードする2. 依存関係をインストール...

MySQL の時間設定に関する考慮事項の詳細な要約

時間は本当に存在するのでしょうか?時間は人間が考え出した概念に過ぎず、物事の変化を測る基準に過ぎない...

VueはElementUIのフォームサンプルコードを模倣する

実装要件ElementUI を模倣したフォームは、インデックス コンポーネント、Form フォーム ...

HTMLフォームアプリケーションにはチェックボックスとラジオボタンの使用が含まれます

チェックボックスやラジオボタンの使用を含むコードをコピーコードは次のとおりです。 <!DOCT...

メタを使用してトラフィックキャッシュをキャンセルし、ページにアクセスするたびにページを更新して簡単にデバッグできるようにします。

コードをコピーコードは次のとおりです。 <!-- ブラウザがローカル キャッシュからページにア...

JavaScript関数の詳細な紹介

任意の数のステートメントを関数を通じてカプセル化することができ、いつでもどこでも呼び出して実行できま...

MySQLで行または列をソートする方法

方法:説明: どちらも達成できません:方法1: sp_product から sp.productid...