1

私の新しいプロジェクトでは、jQuery を使用せずにいくつかのコンテンツを実行する必要があります。私はこのjQueryコードを持っています:

$(document).ready(function() {
  maxHeight = $("#container").height();
  lastSize = 9;
  while($("#content").height()<maxHeight && lastSize < 1000)
  {
      lastSize++;
    $("#content").css("font-size", lastSize);
  }
  lastSize--;
  $("#content").css("font-size", lastSize);
});

このチュートリアルを使用して、純粋な JavaScript で書き直そうとしていますが、正しく機能していません :/ これまでに得たものは次のとおりです。

document.addEventListener('DOMContentLoaded', function() {
  maxHeight = document.getElementById('container').clientHeight;
  lastSize = 9;
  while(document.getElementById('content').clientHeight<maxHeight && lastSize < 1000)
  {
      lastSize++;
    document.getElementById('content').style.fontSize=lastSize;
  }
  lastSize--;
  document.getElementById('content').style.fontSize=lastSize;
});

コードの何が問題になっていますか?

4

2 に答える 2

3

解決した

jquery はブラウザー間の互換性を考慮していることを忘れないでください。

http://jsbin.com/opuzur/51/edit

document.addEventListener('readystatechange', function(){
  if(document.readyState != "complete") return;
  container = document.getElementById('container');
  content = document.getElementById('content');
  maxHeight = container.offsetHeight;
  lastSize = 9;
  while(content.offsetHeight < maxHeight){
    content.style['font-size'] = lastSize + 'px';
    lastSize++;
  }
});
于 2013-09-11T19:49:31.590 に答える