雨夜带刀'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>

Email Suggest 邮箱输入提示

&lt;p&gt;最近的项目会用到登录框邮箱输入提示的功能,于是花了点时间仿照新浪微博的登录框的邮箱提示效果自己写了一个,效果和新浪微博的基本一致,但是实现原理可能会有区别。&lt;/p&gt;
&lt;a href=&quot;http://stylechen.com/wp-content/uploads/demo/email-suggest/index.html&quot; target=&quot;_blank&quot;&gt;查看演示&lt;/a&gt;
&lt;h3&gt;HTML结构部分:&lt;/h3&gt;
&lt;pre class=&quot;brush: c-sharp&quot;&gt;
&amp;lt;div id=&quot;login_box&quot;&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;lt;div&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;label for=&quot;email&quot;&amp;gt;电子邮箱:&amp;lt;/label&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;input type=&quot;text&quot; id=&quot;email&quot; autocomplete=&quot;off&quot; /&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;lt;/div&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;lt;ul id=&quot;email_list&quot;&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;请选择邮箱类型&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@163.com&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@126.com&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@qq.com&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@yahoo.com.cn&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@gmail.com&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@sohu.com&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@hotmail.com&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;lt;/ul&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/pre&gt;
&lt;p&gt;与新浪微博不同的是,我将邮箱后缀都先写在了结构中,然后用把邮箱后缀取出来存到一个数组中。上面input标签中的autocomplete=&quot;off&quot;属性是用来关闭浏览器默认的cookie提示的,如果不关闭这个提示将会弹出2个层,新浪微博的就没有关闭,这应该算是一个BUG吧。&lt;/p&gt;

使用JavaScript实现随机切换网页背景图

<p>每刷新一次页面,就切换一个背景图,并且切换的顺序是随机的,第一次看到这个效果的时候虽然觉得这个效果有点意思,但并没有深究。直到前不久看到<a href="http://bbs.yuyadong.com/thread.php?fid=87" title="亚当学院的JavaScript视频教程" target="_blank">当哥</a>的JavaScript视频教程时,才突然有了灵感,原来实现这个效果是这么的简单。</p>
<p>先看看演示效果:</p>
<div class="demo"><a href="http://stylechen.com/wp-content/uploads/demo/random-bodyBg/index.html" target="_blank">查看演示</a></div>
<p>你可以准备很多张背景图,并且背景图的切换都是随机的,不过由于每次刷新一次页面都会加载一个背景图片,这在一定程度上增大了服务器的负载。不过这些都不是本文讨论的范畴,看看下面的JavaScript代码:</p>

头像

雨夜带刀

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

雨夜带刀的开源项目

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