ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery_jqueryでフォントサイズを自動調整する方法

jQuery_jqueryでフォントサイズを自動調整する方法

WBOY
WBOYオリジナル
2016-05-16 15:55:101598ブラウズ

この記事の例では、jQuery が自動フォント サイズ調整を実装する方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

ここでは、要素内のテキストのフォント サイズを自動的に変更するために jQuery 関数が使用されています。

$.fn.fontfit = function(max) {
  var max_size = 18;
  if (typeof(max) == "undefined")
    max = max_size;
  $(this).wrapInner('<div id="fontfit"></div>');
  var dheight = $(this).height();
  var cheight = $("#fontfit").height();
  var fsize = (($(this).css("font-size")).slice(0,-2))*1;
  while(cheight<dheight && fsize<max) {
    fsize+=1;
    $(this).css("font-size",fsize+"px");
    cheight = $("#fontfit").height();
  }
  while(cheight>dheight || fsize>max) {
    fsize-=1;
    $(this).css("font-size",fsize+"px");
    cheight = $("#fontfit").height();
  }
  $("#fontfit").replaceWith($("#fontfit").html());
  return this;
}

この記事が皆さんの jQuery プログラミングに役立つことを願っています。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。