.box {width: expression(document.body.offsetWidth + "px");
}

/* 元素的居中 */
.box{width: 500px;height: 300px;margin-left: calc((100% - 500) / 2); /* +,-前后必须有空格才能被解释, *, /后可以没有空格 */
}

// Bad
element.style.color = 'blue';

// Bad
element.style.color = "red";
element.style.left = "10px";
element.style.top = "100px";
element.style.visibility = "visible";

// Bad
element.style.cssText = "color: red; left: 10px; top: 100px; visibility: hidden";

.reveal {color: red;left: 10px;top: 100px;visibility: visible;
}

// Good - Native
element.className += " reveal";// Good - HTML5
element.classList.add("reveal");// Good - jQuery
$(element).addClass("reveal");

<!-- Bad -->
<button onclick="doSomething();" id="action-btn">Click Me</button>

function addListener(target, type, handler) {if (target.addEventListener) {target.addEventListener(type, handler, false);// for IE} else if (target.attachEvent) {target.attachEvent("on" + type, handler);// 对于DOM Level 0(这只是不同的版本, 就像html4和html5一样, 目前基本是DOM Level 3)} else {target["on" + type] = handler;}
}

function doSomething() {
// code
}var btn = document.getElementById("btn");// js方法
addListener(btn, "click", doSomething);// jQuery
$("#btn").on("click", doSomething);

<!-- Bad -->
<script>doSomething();
</script>

// Bad
var div = document.getElementById("my-div");
div.innerHTML = "<h3>Error</h3><p>Invalid e-mail address.</p>"; 

function loadDialog(name, oncomplete) {var xhr = new XMLHttpRequest();xhr.open("get", "/js/dialog/" + name, true);
　　xhr.onreadystatechange = function() {　　　　if (xhr.readyState == 4 && xhr.status == 200) {var div = document.getElementById("dlg-holder");div.innerHTML = xhr.responseText;oncomplete();} else {// handle error}　　};xhr.send(null);
}

// jQuery
function loadDialog(name, oncomplete) {$("#dlg-holder").load("/js/dialog/" + name, oncomplete);
}

<!--%s是需要动态改变的参数, 这里我们通过给js函数传递参数实现-->
<div id="template"><li><a href="%s">%s</a></li>
</div>

/*@param {Array} text 这里接受的参数形式是一个数组, 第一个是需要替换的元素后面的参数是顺序替换的内容@return {string} text 返回替换完成后的文本, 再把这文本注入到DOM元素中　
*/
function sprintf( text ) {var i = 1,args = arguments,len = args.length;return text.replace(/%s/g, function() {return ( i < len ) ? args[ i++ ] : '';});
} 

window.onload = function() {var template= document.getElementById("template"),　　　　 templateText = template.innerHTML,result = sprintf( templateText, "/item/4", "Fourth item" );
　　template.innerHTML = result; // 注入修改后的内容
}

<div id="template"><li><a href="/item/4">Fourth item</a></li>
</div> 

<ul id="mylist"><!--<li id="item%s"><a href="%s">%s</a></li>--><li><a href="/item/1">First item</a></li><li><a href="/item/2">Second item</a></li><li><a href="/item/3">Third item</a></li>
</ul>

function addItem( item, url, text ) {var mylist = document.getElementById("mylist"),templateText = mylist.firstChild.nodeValue, // 获取注释节点result = sprintf( templateText, item, url, text );/*More About insertAdjacentHTML: https://developer.mozilla.org/zh-CN/docs/DOM/element.insertAdjacentHTML */mylist.insertAdjacentHTML("beforeend", result);
}

window.onload = function() {addItem( "4", "/item/4", "Fourth item" );
}

<script type="text/x-my-template" id="list-item"><li><a href="%s">%s</a></li>
</script>

function addItem( item, url, text) {var doc = document, // 做好缓存mylist= doc.getElementById("mylist"),script= doc.getElementById("list-item"),templateText= script.text, // 取回模板中的文本result= sprintf(templateText, item, url, text), // 根据参数渲染模板div= doc.createElement("div");div.innerHTML = result.replace(/^\s*/, "");mylist.appendChild(div.firstChild); // 动态插入
}

window.onload = function() {addItem( "4", "/item/4", "Fourth item" );
}