2014-08-10-探究 html5.md

layout	title	tags
post	探究 html5	html5

##classList

div.classList.remove("className");
div.classList.add("className");

/*toggle会切换状态*/
div.classList.toggle("");
div.classList.

##canvas

##contenteditable

<tag contenteditable ></tag>
<tag contenteditable="true"></tag>

##db.transaction transaction 事务性,同进同退

var db = openDatabase('foo', '1.0', 'foo', 2 * 1024);
db.transaction(function (tx) {  
  tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
  // 如果下面这条失败,上面的也会回退
  tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "foobar")');
});

---

##dataset 超级好的 dataset 属性

<div id="user" data-id="123456" data-user="cyk">
  dataset demo.
</div>

<script>
	var el = document.querySelector("#user");
	console.log(el.id);
	console.log(el.dataset.id);
	console.log(el.dataset.user);
</script>

drag/drop & DataTansfer

DataTransfer对象是用于承载drag和drop操作过程的数据的.

   addEvent(el, 'dragstart', function (e) {
   	  // only dropEffect='copy' will be dropable 
      e.dataTransfer.effectAllowed = 'copyMove'; 
      // required otherwise doesn't work
      e.dataTransfer.setData('Text', this.id); 
    });

  addEvent(bin, 'dragover', function (e) {
    if (e.preventDefault) e.preventDefault(); // allows us to drop
    this.className = 'over';
    e.dataTransfer.dropEffect = 'copy';
    return false;
  });