JobbyM

// 对文档添加一个样式表，用指定的样式填充它
// styles 参数可能是字符串或对象。如果它是字符串，就把它作为样式表的文本
// 如果它是对象，将每个定义样式规则的每个属性添加到样式表中
// 属性名即为选择器，其值为对应的样式
function addStyles(styles){
  // 首先，创建一个新样式表
  var styleElt, styleSheet;
  if(document.createStyleSheet){  // 如果定义了IE 的API，即可使用它
    styleSheet = document.createStyleSheet()
  }else{

JobbyM

/*
* 如果e 有classList 属性则返回它。否则，返回一个为e 模拟DOMTokenList API 的对象
* 返回的对象有contains()、add()、remove()、toggle() 和toString() 等方法
* 来检测和修改元素e 的类集合。如果classList 属性是原生支持的，
* 返回的类数组对象有length 和数组索引属性。模拟DOMTokenList 不是类数组对象，
* 但是它有一个toArray() 方法来分拿回一个含元素类名的纯数组快照
*/
function classList(e) {
  if(e.classList) return e.classList; // 如果e.classList 存在，则返回它
  else return new CSSClassList(e);    // 否则，就伪造一个

JobbyM

// 用指定的因子缩放元素e 的文本尺寸
function scale(e, factor){
  // 用计算样式查询当前文本的尺寸
  var size = parseInt(window.getComputedStyle(e, "").fontSize);
  // 用内联样式来放大尺寸
  e.style.fontSize = factor*size + "px";
}
// 用指定的因子修改元素e 的背景颜色
// factors > 1 颜色变浅， factor < 1 颜色变暗
function scaleColor(e, factor){

JobbyM

<!-- text-shadow 属性自动产生阴影效果 -->
<span style="text-shadow: 3px 3px 1px #888;">Shadowed</span>

<!-- 这里我们利用定位可以产生相同的效果 -->  
<span style="position: relative;">
  Shadowed <!-- 这里是投射阴影的文本 -->
  <span style="position: absolute;top:3px;left:3px;z-index:-1;color: #888;">Shadowed<!-- 这里是阴影 --></span>
</span>

JobbyM

elt.value.substring(elt.selectionStart, elt.selectionEnd)

JobbyM

function getSelectedText(){
  if(window.getSelection)  // HTML5 标准API
    return window.getSelection.toString()
  else if(window.selection) // IE 特有的技术
    return document.selection.createRange().text
}

JobbyM

// 作为一个对象的w 和h 属性返回视口的尺寸
function getViewportSize(w){
  // 使用指定的窗口，如果不带参数则使用当前窗口
  w = w || window;

  // 除了IE 8 及更早的版本以外，其他浏览器都能用
  if(w.innerWidth != null) return {w: w.innerWidth, h: w.innerHeight};

  // 对标准模式下的IE（或任何浏览器）
  var d = w.document;

JobbyM

// 以一个对象的x 和y 属性的方式返回滚动条的偏移量
function getScrollOffsets(w){
  // 使用指定的窗口，如果不带参数则使用当前窗口
  w = w || window;

  // 除了IE 8 及更早的版本以外，其他浏览器都能用
  if(w.pageXOffset != null) return {x: w.pageXOffset, y: w.pageYOffset};

  // 对标准模式下的IE（或任何浏览器）
  var d = w.document;

JobbyM

/**
* 这个模块注册一个可以在页面加载完成后自动运行的匿名函数。当执行这个函数时会去文档中查找
* id 为“TOC” 的元素。如果这个元素不存在，就创建一个元素
*
* 生成的TOC 目录应当具有自己的CSS 样式。整个目录区域的样式className 设置为“TOCEntry”
* 同样我们为不同层级的目录标题定义不同的样式。<h1> 标签生成的标题
* className 为“TOCLevel1”，<h2> 标签生成的标题className 为“TOCLevel2”，以此类推
* 段编号的样式为“TOCSectNum”
*
* 完整的CSS 样式代码如下：

JobbyM

// 本模块为不支持它的浏览器定义了Element.insertAdjacentHTML
// 还定义了一些可移植的HTML 插入函数，它们的名字比insertAdjacentHTML 更符合逻辑：
// Insert.before()、Insert.after()、Insert.atStart() 和Insert.atEnd()
var Insert = (function(){
  // 如果元素有原生的insertAdjacentHTML
  // 在4 个函数名更明了的HTML插入函数中使用它
  if(document.createElement("div").insertAdjacentHTML){
    return {
      before: function(e, h){e.insertAdjacentHTML("beforebegin", h);},
      after: function(e, h){e.insertAdjacentHTML("afterend", h);},