序文
この状況は、開発中に遭遇します。 2行のみが表示されます。 3行以上を超えると、「もっと表示」ボタンが表示されます。ボタンをクリックして、残りの行のコンテンツを表示します。この関数を具体的に実装するjQueryプラグインloadingDotsがあります。ただし、今日はネイティブJavaScriptを使用してこの要件を実装します。この要件を達成するために、最も重要なことは、このコンテナ内のテキストの行の数を決定することです。線の数を取得した後、要素の高さを変更し、荷重ボタンが表示されているかどうかを判断します。
window.getComputedStyle（）
ネイティブJavaScriptコードを使用して、要素の個々のスタイルのプロパティを取得するには、 window.getComputedStyle()を使用することは避けられません。 HTML要素が実際にブラウザに表示されている場合、HTML要素のスタイルを返すことができます。もちろん、一部のスタイルはブラウザによってブロックされます。たとえば、リンクの色を取得し、ユーザーが色で特定のアドレスにアクセスしたかどうかを判断する準備をしたい場合、それは間違いなく不可能です。
このメソッドは、 CSSStyleDeclarationのインスタンスであるスタイルキー価値ペアを返します。各属性のインデックス名はありません-そして、ラクダの命名法が採用されています。たとえば、 lineHeight 。
行数=全体の高さ/線の高さ
全体の高さは、高さから得ることができます。行の高さはlineHeightから得ることができ、結果は丸くなって行数を取得します。
ただし、 line-height値が要素に対して設定されていない場合、そのデフォルト値はnormal 、デスクトップブラウザーでは1.2ですが、フォントにも関連しています。したがって、行数を計算する必要がある要素にline-height値を設定することが最善です。
簡単な実装は次のとおりです。
関数countlines（ele）{var styles = window.getcomputedStyle（ele、null）; var lh = parseint（styles.lineheight、10）; var h = parseint（styles.height、10）; var lc = math.round（h / lh）; console.log（ 'line count：'、lc、 'line-height：'、lh、 'height：'、h）; lcを返します;}完全なコードの例
<！doctype html> <html> <head> <title> line count </title> <style type = "text/css"> p {line-height：1.3em; } </style> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"> </head> <body> <p id = "ターゲット">彼女は赤ちゃんを素敵に見せました。すべてが白く、彼女はいつも蒸しとスコーンと閉じたクリームの新鮮なブルーベリーパイを持っていて、彼女は老人と海を読んでいて、彼女の小さな男の子はボンネットでロリーです。それは驚くべきことです、そして私はこれが素敵だと思いました。私の子供は、爆発的なデバイスのように遊ぶようなものです。私たちの犬の耳に突き刺さっているように、彼女がどこで見つけたのかわかりません。彼女はすでに壁を乾燥させる方法を知っています。彼女は壁に穴を開けます。<br />」今日の中国人は当時のドイツ人のようで、「上昇」の幻想にふけることで、他人のお世辞を信じることに慣れています。ポケット。」上海外国研究大学の国際関係と広報学部の教授であるチェン・ヤウェンは、彼の新しい本「偉大な力の戦略的力」で指摘しました。中国の多くの人々は現在、「繁栄」の幻想に閉じ込められており、総経済成果の背後にあることを認識していません。穏やかで平和な状況で現れた世界には大きな国はありません。また、中国の新たな文明の若返りはリスクとひねりに満ちています。国の崩壊、崩壊、または衰退を防ぐことは、中国の国家戦略の最優先事項になるはずです。 「柔らかい幸福」を深めることは、国を脆弱にするだけです。 </p> <p>行数：<span id = "shower"> </span> </p>ウィンドウサイズを変更し、<ボタンonclick = "countlines（）">自動的に計算します</button> <スクリプトタイプ= "text/javascript"> var target = document.getelementbyid（ 'ターゲット'）; window.getComputedStyle（ELE、null）; var lh = parseint（styles.lineheight、10）; var h = parseint（styles.height、10）; var lc = math.round（h / lh）; console.log（ 'line count：'、lc、 'line-height：'、lh、 'height：'、h）; return lc;} function change（）{shower.innerhtml = countlines（ターゲット）;} window.onresize = change（）; </script> </body> </html> [/html]要約します
上記はこの記事に関するすべてです。この記事の内容がJavaScriptを使用しているすべての人に役立つことを願っています。ご質問がある場合は、メッセージを残して話し合ってください。