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

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

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

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

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

要約する

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