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 で iframe を実装するためのアイデアとコード

1. 応用シナリオ親ページ a.jspサブページ b.jsp (ページ a に埋め込まれた ifra...

HTML ページをスクロールするときに一部のコンテンツを固定位置に固定する方法

この記事では主に、レイアウトに役立つ、HTML ページ内の一部のコンテンツを固定してスクロール時にス...

JavaScriptのスリープ関数の使用

目次1.スリープ機能2.タイムアウトを設定する3. 約束4. 非同期待機5. 1秒後に出力1、2秒後...

HTMLページ埋め込み動画とJSコントロール切り替え動画例の詳しい説明

まず、ページにビデオを埋め込むための HTML コードは次のとおりです。コードをコピーコードは次のと...

vue+rem カスタムカルーセル効果

vue+remを使用したカスタムカルーセルチャートの実装は参考までに。具体的な内容は以下のとおりです...

SQL 文における複合主キーと結合主キーに関する予備的研究

1. 複合主キーいわゆる複合主キーとは、テーブルの主キーが複数のフィールドで構成され、ビジネス上の意...

CSS を使用して ul と li の水平配置を実現する 2 つの方法

li はブロックレベル要素であり、デフォルトで 1 行を占めるため、水平方向の配置を実現する場合は、...

ウェブページの要素の検査とソースコードの表示の違いについて

Chrome ブラウザで Web ページを開くと、ページを右クリックすると 2 つの非常によく似たオ...

よく使用される入力テキストボックスの内容は自動的に垂直方向に中央揃えされ、クリックするとデフォルトのプロンプトテキストは空になります。

3つの機能: 1. コンテンツの垂直方向の自動中央揃え2. デフォルトのプロンプトテキストは灰色で表...

CSS 疑似クラス: 空っぽだと光る (サンプルコード)

最近私の記事を読んだ人なら誰でも、私が現在WeChatミニプログラムプロジェクトを担当しており、その...

CSSを使用してHTMLテキストボックス内のテキストの垂直方向の中央を制御する

Text の height 属性が定義されている場合、Text に入力されたテキストは垂直方向に中央...

テーブルはセルとimg画像を結合してtd HTML全体を埋めます

ソースコード(一部のクラスは削除されています):コードをコピーコードは次のとおりです。 <テー...

Reactは、読み込み、読み込み完了、読み込み失敗の3つの段階の原則分析を実装します。

最近ブログに書いたのですが、プロジェクトリストの中に写真がたくさんあり、最初は読み込みが遅いので、ス...

HTMLページ内の検索機能を完了する

最近、たくさんの人に改変してもらったフレームワークに取り組んでいます。毎日コードを見ていると目が回り...

Linux CentOS インストール JDK および Tomcat チュートリアル

まずJDKをダウンロードします。ここではjdk-8u181-linux-x64.tar.gzを使用し...