雨夜带刀's Blog

让Firefox支持outerHTML的解决方案

<p>对于DOM对象的innerHTML属性想必大家都不会陌生,但是outerHTML用起来相对于会少一点了,innerHTML属性返回的是DOM对象从开始标签到结束标签中所包含的HTML,而outerHTML属性返回的是包括DOM对象本身标签在内的HTML,下图能很好的解释两个属性的区别:</p>
<div class="art_inner_img"><img src="http://stylechen.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>
<p>下图是理想中的效果图,外部容器的宽度和高度固定,中间的图片宽度和高度未知,但是图片要始终要相对于外部的容器垂直居中。</p>
<div class="art_inner_img"><img src="http://stylechen.com/wp-content/uploads/2010/12/img_middle.jpg" alt="理想的图片垂直居中效果图" /></div>

头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。