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 の組み合わせと違い

推薦する

HTML ページにミュージック ビデオを追加する例

1. ビデオタグFirefoxでは自動再生をサポートしますが、GoogleとIEではサポートしません...

JSはカリキュラムタイムテーブルアプレット(スーパーカリキュラムタイムテーブルを模倣)を実装し、カスタムバックグラウンド機能を追加します

概要:市販されているいくつかのタイムテーブルソフトウェアから教訓を得ました。機能が複雑すぎるため、タ...

VueはEChartsを使用して折れ線グラフと円グラフを実装します

バックエンド管理プロジェクトを開発する場合、バックエンドのユーザーデータをカウントし、折れ線グラフや...

Webフロントエンドのパフォーマンス最適化

ウェブフロントエンド最適化のベストプラクティス: コンテンツWebフロントエンド最適化のベストプラク...

HTML テーブル マークアップ チュートリアル (6): 暗い境界線の色属性 BORDERCOLORDARK

表では、右下の境界線の色を個別に定義したり、セルの左上の境界線の色を定義したりできます。これら 2 ...

Nginx で Brotli 圧縮アルゴリズムを有効にする方法の例

Brotli は、Zopfli よりも 20 ~ 26% 高い圧縮率を実現できる新しいデータ形式です...

Vue codemirrorはオンラインコードコンパイラの効果を実現します

序文Web 上でオンライン コード コンパイルの効果を実現したい場合は、 CodeMirrorを再度...

MySQL バッチ追加および保存メソッドの例

ストレステストにログインする際には、多くの異なるユーザーが必要となり、データベースに新しいデータを追...

TomcatをダウンロードしてLinuxにインストールする詳細な手順

Linux に触れたばかりの方には、この内容が役に立つかもしれません。Linux にしばらく触れてい...

Dockerコンテナ内の設定ファイルの変更の実装

1. コンテナに入るdocker run [オプション] イメージ名 [起動コンテナに渡されるコマン...

良い広告にはどのような特徴が必要ですか?

広告業は人間であることに似ていると言う人がいます。これは本当です。優れた広告には、優れた人間と同じよ...

Linuxでブーストライブラリをインストールするための完全な手順

序文Boost ライブラリは、標準ライブラリのバックアップとして機能し、C++ 標準化プロセスの開発...

Linux での Nginx アンチホットリンクと最適化の実装コード

バージョン番号を非表示バージョン番号は非表示になっていません。セキュリティを強化するために、バージョ...

React 国際化 react-i18next の詳細な説明

導入react-i18next は、 i18nextをベースにした強力な国際化フレームワークです。 ...