百度前端技术学院任务笔记

1、getComputedStyle

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。

getComputedStyle() gives the final used values of all the CSS properties of an element.

语法如下：

var style = window.getComputedStyle("元素", "伪类");

例如：

var dom = document.getElementById("test"),
    style = window.getComputedStyle(dom , ":after");

就两个参数，大家都懂中文的，没什么好说的。只是额外提示下：Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二个参数“伪类”是必需的（如果不是伪类，设置为null），不过现在嘛，不是必需参数了。

that.left = parseInt(w.getComputedStyle(that.model , null)['left']);//task37,获取其距离左边多远

可参看【http://www.h5course.com/a/20151107307.html】；

2、replace的用法

replace中有函数的用法

function f2c(s) {
  var test = /(d+(.d*)?)F/g;    // 初始化模式。
  return(s.replace
    (test,
      function($0,$1,$2) { 
          console.log($0+'  '+$1+" "+$2);  //32F 32 undefined   //212F  212 undefined

return((($1-32) * 5/9) + "C");

      }
    )
  );
}
alert(f2c("Water freezes at 32F and boils at 212F."));

答案：

Water freezes at 0C and boils at 100C.

注意其正则表达式中有两个小括号，一次用来划分数字，一次用来分割小数点。

 3、自定义的添加类名和创建元素

当我们自己创建自定义的函数后，使用的时候不要忘了加上“”或''，否则会出现错误。

var _ = {
    
    getId: function(name) {
        return document.getElementById(name);
    },
    
    getTag: function(par, tagname) {
        var par = par || document;
        return par.getElementsByTagName(tagname)[0];
    },
    
    getClass: function(par, classname) {
        var par = par || document;
        par.getElementsByClassName(classname)[0];
    },
  
    creatDom: function(el) {
        return document.createElement(el);
    },
    
    addClass: function(obj, cssName) {
        var oldname = obj.className;
        obj.className = oldname + ' ' + cssName;
    },
    
    data: function(el, type) {
        return el.getAttribute('data-' + type);
    },
};

function Ui_table(op) {
    
    if(!op.data) return false;
    
    var data = op.data;
    var sortType = op.sortType || 'all';
    //dom
    var table = _.creatDom('table'),
    
    //添加css
    _.addClass(table, 'm_width');

    //模板
    var tbodyTem = _.getId('tem-tbody').innerHTML;
    
    var theadTem = (function() {
        var tr = _.creatDom('tr'),
            tem = '';
        .........
        return tr.innerHTML = tem;
    })();
    
    _.getTag('', 'body').appendChild(table);
};