CSS のインライン スタイルに変換するソリューション (css-inline)

CSS のインライン スタイルに変換するソリューション (css-inline)

シーンについて話す

  • メールを送信
  • サードパーティのウェブサイトにHTMLを埋め込む
  • 他の編集者の記事をコピーして編集し、WeChatやToutiaoなどのWe Mediaに公開する

上記のシナリオでは、インライン スタイルを使用すると互換性が大幅に高まり、元のスタイルを変更せずに維持することもできます。

解決

  • ジュース
  • インライン CSS

これら 2 つのソリューションの機能はApiと非常に似ています。ここではjuice例に挙げます。

インストール

npm i juice --save

使用

「juice」からジュースをインポートする
定数html = `
<div class="test"><h1>テストジュース</h1></div>
<スタイル>
div{
    幅: 90%;
    高さ: 500px;
}
</スタイル>
const 結果 = juice(html)
console.log(結果)

結果

<div スタイル="幅: 90%; 高さ: 500px;">
<h1>ジュースのテスト</h1>
</div>

ps: CSSを見てみましょう - インラインブロック要素(inline-block)、ラベル表示モード変換表示

インラインブロック要素
インライン要素には <img />、<input />、<td> などの特別なタグがいくつかあり、幅、高さ、配置属性を設定できます。一部の資料では、これらをインライン ブロック要素と呼ぶことがあります。

インライン ブロック要素の機能:
(1)隣接するインライン要素(インラインブロック)と同じ行に配置しますが、その間に空白スペースを置きます。
(2)デフォルトの幅はコンテンツの幅となります。
(3)高さ、行の高さ、余白、パディングをすべて制御できます。

ラベル表示モード変換表示
ブロックインライン: display:inline ;

インラインブロック: display:block ;

ブロック要素とインライン要素はインライン ブロックに変換されます: display: inline-block block;

要約する

CSS のインライン スタイルを変換するソリューション (css-inline) に関するこの記事はこれで終わりです。CSS インライン スタイルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  JavaScript の組み込み Date オブジェクトの詳細な説明

>>:  dockerfile における ENTRYPOINT と CMD の組み合わせと違い

推薦する

知っておくべき 7 つのネイティブ JS エラーの種類

目次概要1. 範囲エラー2. 参照エラー3. 構文エラー4. タイプエラー5. URIエラー6. 評...

CSS3セレクターの新機能の実装

目次基本的なセレクタ拡張属性セレクタ疑似クラスと疑似要素セレクター基本的なセレクタ拡張1. 子要素セ...

MySQL で日付時刻データを取得し、その後に .0 を追加する方法

MySQL のデータ型は datetime です。データベースに保存されているデータは 2015-0...

SpringBoot プロジェクトの Docker 環境を実行するときに発生する無限再起動問題の詳細な説明

もしかしたら私の考え方が間違っていたのかもしれないし、問題の説明が少し乱雑だったのかもしれないが、こ...

CSS を使用して複数の方法で等高レイアウトを実装するサンプル コード

この記事で説明する等高レイアウトでは、純粋な CSS を使用して、要素の高さを手動で設定することなく...

MySQL テーブルとデータベース シャーディングのアプリケーション シナリオと設計方法

多くの友人がフォーラムやメッセージエリアで、どのような状況で MySQL をシャーディングする必要が...

MySQL インジェクションにおける outfile、dumpfile、load_file 関数の詳細な説明

SQL インジェクション脆弱性を悪用する後期段階では、MySQL のファイル シリーズ関数を使用して...

WeChatアプレット認証ログインを処理するエレガントな方法

序文WeChat ミニプログラム プロジェクトでユーザー情報を取得し、ユーザー ログインを実装する場...

vuex データの永続化のための 2 つの実装ソリューション

目次ビジネス要件:解決策 1: vuex-persistedstate解決策2: vuex-pers...

CSS3 で画像ドロワー効果を実装するためのサンプル コード

いつものように、まずは画像効果を投稿しましょう: このエフェクトの原理は非常にシンプルです。CSS3...

Linux lessコマンド例の詳細な説明

ファイル名が少ないファイルを表示ファイル名を少なく | grep -n コンテンツを検索内容に応じて...

Linuxはlsof/extundeleteツールを使用して、誤って削除されたファイルやディレクトリを復元します。

序文Linux には Windows のような目立つごみ箱がないため、簡単に復元することはできません...

Swiper+echartsは複数のダッシュボードの左右スクロール効果を実現します

この記事では、ダッシュボードの左右スクロール効果を実現するためのスワイパー+echartsの具体的な...

MySQL で 1000 万件のレコードをすばやくクエリする方法

目次通常のページングクエリ最適化する方法大きなオフセット使用ID制限大量データ問題の最適化通常のペー...

エレメントアバターアップロード練習

この記事は、Element公式サイトとQiniu Cloud公式サイトを使用しています。 eleme...