2016/01/28

DOMを操作




See the Pen js DOM操作 by takapen (@takapen) on CodePen.


test




.text {font-size: 40px;}




//console.dir(window);//オブジェクトのプロパティを表示する
//console.log(window.outerHeight);//ブラウザ高さを取得
//window.location.href = "http://www.proglad.tokyo/";//別ページに飛ばす

//window.document //いま開いているページを操作する
//windowは省略できるのでdocumentでもよい

var e = document.getElementById("js-text");
e.textContent = "hello!";//テキストを書き換え
e.style.color = "#c00";//css
e.className = "text";//クラス名を追加


//クリック時に要素を追加
document.getElementById("js-add").addEventListener("click", function(){
  //要素を追加
  var greet = document.createElement("p"),
      text = document.createTextNode("hello world");//pとテキストを作る
  document.body.appendChild(greet).appendChild(text);//body末尾にpを追加。さらにその中にテキストを追加。
});






参照 : ドットインストール