JavaScript DOMプログラミングアートノート(9章-10章)

3697 ワード

第九章
スタイルのプロパティ

各要素ノードに属性スタイルがあります.この属性はオブジェクトに戻ります.スタイルはこのオブジェクトの中にあります.

スタイルを取得する方法:

  element.style.color

以上のコードは要素のスタイルのカラー属性

を取得する.

取得したCSSスタイル名に「-」の連語記号がある場合、たとえば「font-family」の属性を取得すると、DOMでは次のようになります.

  element.style.fontFamily

外部様式表で宣言されたスタイルはスタイルオブジェクトには入らず、ドキュメントの一部で宣言されているスタイルも同じです.つまりHTMLドキュメントに書かれているスタイルだけがスタイル属性で取得できますが、DOMで設定されたスタイルで検索できます.

.styleオブジェクトによって取得されたスタイルは書き込み可能であり、スタイル

  element.style.property = value

を直接に値付け操作で更新することができる.

styleオブジェクトの属性値は引用符に入れなければなりません.

もしある要素の表現効果を変えたいなら、CSSを使います.ある元素の行動を変えたいなら、DOMを使います.

クラスナメ属性

classNameは読み取り可能で書き込み可能な属性であり、すべての要素ノードにこの属性がある.

は、className属性で一つの要素のクラス属性を得ることができます.

  element.className

は、className属性で要素のクラス属性を設定することもできます.

  element.className = value

classNameとは、ある要素のクラス属性を指すときに、この要素の元のクラス設定をカバーしますが、文字列スティッチング操作を利用して、新しいクラス設定をclass Nameに追加してもいいです.上書きではありません.

  lement.className += " newValue"

newValueの前にスペースがあります.

もちろん、classを追加する操作を一つの関数addClassにパッケージすることができます.この関数には二つのパラメータがあります.一つ目は新しいclassを追加する要素が必要で、二つ目は新しいclass設定値です.

function addClass(element,value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName+= " ";
        newClassName+= value;
        element.className = newClassName;
    }
}

第10章
set Timeout関数

setTimeout関数は、ある関数に所定の時間が経過した後に実行を開始させることができます.この関数には2つのパラメータがあります.最初のパラメータは通常、1つの文字列で、その内容は実行されるべき関数の名前です.2番目のパラメータは、1ミリ秒単位で設定した後、最初のパラメータの与えられた関数の実行を開始します.

variable = setTimeout("function", interval)
movement = setTimeout("moveMessage()",5000);

は、「実行待ち」キューの関数をクリアーTimeout関数でキャンセルすることができる.この関数には、setTimeout関数が保持されている戻り値を呼び出す変数が必要です.

  clearTimeout(variable)

ある要素を移動するカプセル化関数:element IDはモバイル要素のIDであり、final_xとfinal_yはそれぞれ要素の終点位置のpx値であり、intervalはフレーム毎の間隔時間

function moveElement(elementID,final_x,final_y,interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (elem.movement) {
    clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
    elem.style.left = "0px";
  }
  if (!elem.style.top) {
    elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
    return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/10);
    xpos = xpos + dist;
  }
  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/10);
    xpos = xpos - dist;
  }
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/10);
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y)/10);
    ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}

である.
Math小数点以下の丸め方法について

Math.ceeir方法は、1つの数を上に丸めることができる.

  Math.ceil(1.4)  //    2

Math.flor方法は、1つの数を切り捨てることができる.

  Math.floor(1.4)  //    1

Math.round方法は、1つの数を四捨五入して最も近い整数にすることができる.

Math.round(1.5)  //    2
Math.round(1.4)  //    1

【JSデータタイプ】JSでの判定データタイプ関数