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

推薦する

Docker x509 の安全でないレジストリ問題を解決する

Docker をインストールした後、会社が構築したプライベート サーバー Harbor からプルしよ...

MySQL のインデックスとビューの使用方法と違いの詳細な説明

序文この記事では主に、MySQL のインデックスとビューの使用方法と違いを紹介し、参考と学習のために...

MySQL countの詳細な説明と関数のサンプルコード

mysql countの詳細な説明count関数はテーブルや配列内のレコードを数えるために使われます...

MySQL はデータベースを動的に更新します スクリプト例の説明

具体的なupgradeスクリプトは次のとおりです。インデックスを動的に削除する アップグレードが存在...

nestjs における例外フィルター Exceptionfilter の具体的な使用法

Nestjs 例外フィルターといえば、非常に強力な .Net のグローバル フィルターについて触れな...

Docker を使用した JMeter+Grafana+Influxdb 監視プラットフォームの構築に関する詳細なチュートリアル

Jmeter がネイティブの結果表示機能を提供していることは誰もが知っています。ネイティブの結果表示...

CentOS での samba フォルダ共有サーバー構成の詳細な説明

1. はじめに最近、CentOS での開発には多くの不便があることがわかりました。Windows/M...

CSS3+JS による虫眼鏡モードの完璧な実装の詳細説明

約 1 年前、私は「虫眼鏡効果を模倣するいくつかの方法の原理の分析」という記事を書きました。当時、自...

セマフォによるTomcatの異常終了の解決方法

最近はビッグデータで遊んでいます。友人が私のところに来て、オンラインの Tomcat が不可解に終了...

Docker-compose ネットワークの詳細な例

今日は Docker でのネットワーク設定を試し、後で忘れないようにプロセスを記録しました。 (シス...

PHP で JSON バックスラッシュを削除する例

1. 「stripslashes($_POST['json']);」メソッドを使用し...

Reactホームページの読み込みが遅い問題のパフォーマンス最適化事例の詳細な説明

しばらくReactを勉強した後、実践してみたいと思います。そこで、個人のブログのウェブサイトを再構築...

XHTML Web ページ チュートリアル

<br />この記事は主に、初心者にXHTMLの基本知識と、XHTMLとHTMLの違いを...

ソフトウェア 404 と 404 エラーとは何か、またそれらの違いは何ですか

まず、404 とソフト 404 とは何でしょうか? 404: 簡単に言えば、ユーザーが存在しないペー...

CSS導入方法4つのまとめ(共有)

1. インライン参照:ラベルに直接使用されるが、メンテナンスコストが高い スタイル='フォ...