JavaScript DOM 编程艺术笔记(9章-10章)

第九章

style属性

• 每个元素节点都有一个属性 style，这个属性会返回一个对象，样式都放在这个对象里面

• 获取样式方式：

    element.style.color
  

  以上代码会获取元素的样式中的 color 属性

• 如果获取的 CSS 样式名有"-"连词符号，则转换成驼峰法命名，比如要获取"font-family"属性，那么在 DOM 里应该如下：

    element.style.fontFamily
  

• 在外部样式表声明的样式不会进入 style 对象，在文档的部分里声明的样式也是如此，也就是说只有写在 HTML 文档里面的样式才能用 style 属性获取到，但是通过 DOM 设置的样式是可以检索到的。

• 通过 style 对象获取到的样式是可写的，可以直接用赋值操作更新样式

    element.style.property = value
  

• style 对象的属性值必须放在引号里

• 如果想改变某个元素的呈现效果，使用CSS；如果想改变某个元素的行为，使用DOM。

className 属性

• className 是一个可读可写的属性，凡是元素节点都有这个属性。

• 可以用 className 属性得到一个元素的 class 属性：

    element.className
  

• 也可以用 className 属性设置一个元素的 class 属性：

    element.className = value
  

• 通过 className 是指某个元素的 class属性时将覆盖该元素原有的 class 设置，但是我们可以利用字符串拼接操作把新的 class 设置追加到 className 上去，而不是覆盖：

    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;
      }
  }
  

第十章

setTimeout 函数

• setTimeout 函数可以让某个函数在经过一段预定的时间之后才开始执行，这个函数有两个参数：第一个参数通常是一个字符串，其内容是将要执行的那个函数的名字；第二个参数是一个数字，它以毫秒为单位设置了需要多长时间后才开始执行第一个参数所给的函数：

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

• 可以用 clearTimeout 函数来取消“等待执行”队列里的某个函数。这个函数需要一个参数：保存着 setTimeout 函数调用返回值的变量：

    clearTimeout(variable)
  

• 一个移动某个元素的封装函数：elementID 为移动元素的 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.ceil 方法可对一个数进行上舍入。

    Math.ceil(1.4)  // 结果为2
  

• Math.floor 方法可对一个数进行下舍入。

    Math.floor(1.4)  // 结果为1
  

• Math.round 方法可对一个数进行四舍五入为最接近的整数。

  Math.round(1.5)  // 结果为2
  Math.round(1.4)  // 结果为1