要想获取HTML元素的计算样式一直都存在很多的兼容问题，各浏览器都会存在一些差异，Firefox、webkit(Chrome,Safari)支持W3C标准的方法：getComputedStyle()，而IE6/7/8不支持标准的方法但是有私有的属性来实现：currentStyle，IE9和Opera两个都支持。有了这2个方法和属性基本上可以满足大多数要求了。
var getStyle = function( elem, type ){
return 'getComputedStyle' in window ? getComputedStyle(elem, null)[type] : elem.currentStyle[type];
};
easyDialog没有模板机制，只负责逻辑层的弹出效果，至于内容(消息框、表单、图片等)该如何呈现，easyDialog都不管，内容属于业务层的东西，业务需求是千变万化的，如果逻辑和业务结合很紧密，那么可移植性和可扩展性将大大降低。当然，如果你想找那种集成了模板的弹出层，请移步artDialog，artDialog的模板设计得很精美，功能也是很丰富的，但是体积比较大，压缩后的体积还是有18KB，如果是注重性能的网站，一个弹出层组件有这么大至少对于我来说是没法容忍的，在某些情况下优点恰恰也成了缺点，easyDialog始终保持着超轻量级。
<p>对于DOM对象的innerHTML属性想必大家都不会陌生，但是outerHTML用起来相对于会少一点了，innerHTML属性返回的是DOM对象从开始标签到结束标签中所包含的HTML，而outerHTML属性返回的是包括DOM对象本身标签在内的HTML，下图能很好的解释两个属性的区别：</p>
<div class="art_inner_img"><img src="https://blog.yiguochen.com/wp-content/uploads/2011/02/outerhtml_demo.png" alt="innerHTML和outerHTML的区别"></div>
<p>outerHTML最开始是属于IE的私有属性，可以查看MSDN上的说明：<a href="http://msdn.microsoft.com/en-us/library/ms534310%28VS.85%29.aspx" target="_blank">outerHTML Property</a>。目前IE、Chrome、Safari、Opera都能支持这个属性，杯具的是outerHTML不支持Firefox，在Firefox中该属性永远返回undefined。</p>
<p>让Firefox支持outerHTML属性可以通过扩展HTMLElement的原型来实现…</p>
<p>最近的项目会用到登录框邮箱输入提示的功能，于是花了点时间仿照新浪微博的登录框的邮箱提示效果自己写了一个，效果和新浪微博的基本一致，但是实现原理可能会有区别。</p>
<a href="https://blog.yiguochen.com/wp-content/uploads/demo/email-suggest/index.html" target="_blank">查看演示</a>
<h3>HTML结构部分：</h3>
<pre class="brush: c-sharp">
&lt;div id="login_box"&gt;
&nbsp;&nbsp;&lt;div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for="email"&gt;电子邮箱：&lt;/label&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" id="email" autocomplete="off" /&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;ul id="email_list"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;请选择邮箱类型&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;@163.com&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;@126.com&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;@qq.com&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;@yahoo.com.cn&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;@gmail.com&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;@sohu.com&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;@hotmail.com&lt;/li&gt;
&nbsp;&nbsp;&lt;/ul&gt;
&lt;/div&gt;
</pre>
<p>与新浪微博不同的是，我将邮箱后缀都先写在了结构中，然后用把邮箱后缀取出来存到一个数组中。上面input标签中的autocomplete="off"属性是用来关闭浏览器默认的cookie提示的，如果不关闭这个提示将会弹出2个层，新浪微博的就没有关闭，这应该算是一个BUG吧。</p>
<p>图片的宽度和高度是未知的，没有固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求，所以先把一些常用的方法都收集整理了一下。</p>
<p>下图是理想中的效果图，外部容器的宽度和高度固定，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。</p>
<div class="art_inner_img"><img src="https://blog.yiguochen.com/wp-content/uploads/2010/12/img_middle.jpg" alt="理想的图片垂直居中效果图" /></div>