applezqp

购入G11几个星期了，本来想每个周末研究一道菜，还是懒懒的。第一道菜上镜了，韩国料理大酱汤。不是我崇洋媚外，只是对于不常吃的菜还是比较感兴趣。

准备食材是件很麻烦的事，需要很多种，但每一种需要的量并不多。为了省事，我充分发挥了主观能动性，去掉不少食材。所以，主要的食材就是娃娃菜、洋葱、大蒜、冬菇、黄瓜、豆腐、花颌。其实，大酱汤的口感在于豆酱，超市都有买的。所以这道菜并没有太大的技术含量。

成果图，好像没有那么好看，不过味道还不错。

换了主题，对原来的主题(pastoral)做个纪念。

获取元素尺寸的方法

1.通过clientWidth, offsetWidth, scrollWidth.

clientWidht, clientLeft, clientX, offsetWidth, scrollWidth等具体的含义看DOM。

clientWidth=width+padding相当jQuery的innerWidth();

offsetWidth=width+padding+border相当于jQuery的outerWidth()，outerWidth(true) 则包括margin;

scrollWidth是元素的滚动宽度，包括padding.

clientWidth, offsetWidth, scrollWidth获取的是纯数字的值，但不能用于display:none;的元素，可用于visibility:hidden;的元素。

获取窗口的尺寸会有些不同，这涉及到渲染模式。

…盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在不声明Doctype的情况下，浏览器默认是Quirks Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat，对其解释如下：
BackCompat Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat Standards-compliant mode is switched on. (Standards Mode)

当页面是怪异模式时，IE无法识别document.documentElement，所以var height = document.compatMode==”CSS1Compat”?document.documentElement.clientHeight : document.body.clientHeight;或者可以通过下面的函数直接获取尺寸。

function getWindowSize(){
 var w=document.documentElement.clientWidth||document.body.clientWidth;
 var h=document.documentElement.clientHeight||document.body.clientHeight;
 return{'w':w,'h':h};
}

其实也可以通过window.innerWidth和window.outerWidth获取屏幕的尺寸，不过IE并不支持。

获取文档的尺寸时，当页面是标准模式下，document.body.clientHeight则是文档的高度。而document.body.offsetHeight, document.body.scrollHeight, document.documentElement.offsetHeight,  document.documentElement.scrollHeight也是文档的高度，但在IE下document.documentElement.offsetHeight则是窗口的高度，很奇怪，自己也有点晕了。

2. 通过document.defaultView.getComputedStyle

IE并不支持这个方法，IE可以通过currentStyle方法。不过，两者在细节上据说还是有所区别的，document.defaultView.getComputedStyle获得的是绝对值，即em单位会转换成px，但currentStyle则不会。

function getStyle(obj,pro){
 return obj.currentStyle ?
 obj.currentStyle[pro] :
 document.defaultView.getComputedStyle(obj,null)[pro];
}

getStyle()函数获取的是带单位的值，可用于display:none;的元素，但此时无法获得未在样式中显示定义的属性，例如高度是自适应的元素，获得的值就是auto。如果元素未定义display:none;即使高度自适应，也可以获得实际的高度值。getStyle()获得的是计算后的样式值。

PS: 那如何获得隐藏的自适应元素的尺寸呢，js获取隐藏元素(display:none)的尺寸有解说。

PS: 如果用该方法获得float和opacity属性值，getStyle()函数则要做一些变动，可以参考prototype的getStyle()函数。

3. obj.style.width

obj.style.width获取的是带单位的值，但只能获取获取内嵌的样式，即<code>&lt;div style=”width:100px; height:100px”&gt;</code>这种形式的属性值，内部样式和外部样式中的属性值都无法获得。如果没有内联样式，获取的值就是空。通常也是通过obj.style来设置尺寸，不过要记得带单位。

获取元素位置的方法

1. getBoundingClientRect()

function getPos(obj){
 return {
   top:document.documentElement.scrollTop+obj.getBoundingClientRect().top,
   left:document.documentElement.scrollLeft+obj.getBoundingClientRect().left
 };
}

2. offsetTop和offsetLeft

function getPos(obj){
 var pos = {"top":0, "left":0};
 if (obj.offsetParent){
   while (obj.offsetParent){
     pos.top += obj.offsetTop;
     pos.left += obj.offsetLeft;
     obj = obj.offsetParent;
   }
 }else if(obj.x){
   pos.left += obj.x;
 }else if(obj.x){
   pos.top += obj.y;
 }
 return pos;
}

方法一的效率比较高，但是safari并不支持方法一，如果需要兼容safari还是得要方法二。

location

2009年过去了这么久，才写总结，有点汗颜。

年初的转折

2009年初，人生轨迹有了一点转折，离开学校，开始自己的第一份工作。来到广州，纯属意外，缘分吧。其实，自己觉得有点遗憾，没有好好和校园生活告别。和舍友的毕业旅行，还是让我有点欣慰，四个人都玩的很开心。然而正如我们当初所不愿的，我们还是在四个不同的城市，希望以后偶尔还能聚聚。

工作

工作了一段时间后，我还是庆幸自己当初选择了工作，而不是继续学习。呵呵，人还是不要后悔自己的选择会比较开心一点。

工作中的学习。Q3主要学习了HTML, CSS，Q4主要学习了JS。

对于HTML,CSS，在开始的时候，我的热情还是比较大的，但慢慢发现他们没有JS好玩，而且有时候发现某些问题实在是无理取闹，没有根据可言，有点沮丧。最近，对HTML,CSS，也比较麻木了。创新的东东才能给人激情。今天又看了N人写的代码，觉得自己麻木的根本原因是缺乏创新。虽然工作中需要模板，但还是可以不断改进旧的模板，引进新的模板，继续保持“玩”的精神才能使自己更有激情。嗯，激情很重要！

对于JS，我应该处在瓶颈阶段。自己认为JS应该有三个阶段：初级、中级、高级。初级也就是入门的阶段，了解基本的语法，能够实现一些简单的页面效果。自己应该算是入门了，但是同样的效果，高手和新手的写法还是有很大的区别，自己在效率方面也考虑的比较少。而且JS中还有很多地方没有深入研究，比如prototype, constructor，闭包等都理解得不够透彻。由于自己主要是制作页面，后台部分接触的较少，数据的部分、ajax的部分，这些JS关键的地方都没有机会深入。希望2010年，自己能够尽量向中级靠拢。 高级的部分……自己觉得应该还是有这个阶段，至于怎么定义，我想等我到了中级的阶段应该会比较清晰吧。或许，高级就是那种抛开语言本身所剩的东东。

生活

注重心灵的修养。活了20多年，居然没有注意到这方面，确实对自己很讶异。看了《遇见未知的自己》，觉得还不错，值得一读。2010，做个诚实、快乐的修行者。

2010的小开头

2010，本命年，呜呜，民间说法“本命年犯太岁，太岁当头坐，无喜必有祸”，那改信上帝，会不会好一点？嗯，开年就遇到很多麻烦事，不过希望自己能够静下心，一件一件慢慢解决（“人的恐惧一般都是对未知的恐惧”）。希望2010上半年的愿望可以实现。