获取元素的计算的样式

要想获取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没有模板机制,只负责逻辑层的弹出效果,至于内容(消息框、表单、图片等)该如何呈现,easyDialog都不管,内容属于业务层的东西,业务需求是千变万化的,如果逻辑和业务结合很紧密,那么可移植性和可扩展性将大大降低。当然,如果你想找那种集成了模板的弹出层,请移步artDialog,artDialog的模板设计得很精美,功能也是很丰富的,但是体积比较大,压缩后的体积还是有18KB,如果是注重性能的网站,一个弹出层组件有这么大至少对于我来说是没法容忍的,在某些情况下优点恰恰也成了缺点,easyDialog始终保持着超轻量级。

阅读全文 »

让Firefox支持outerHTML的解决方案

<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>

阅读全文 »

Email Suggest 邮箱输入提示

&lt;p&gt;最近的项目会用到登录框邮箱输入提示的功能,于是花了点时间仿照新浪微博的登录框的邮箱提示效果自己写了一个,效果和新浪微博的基本一致,但是实现原理可能会有区别。&lt;/p&gt;
&lt;a href=&quot;https://blog.yiguochen.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="https://blog.yiguochen.com/wp-content/uploads/demo/random-bodyBg/index.html" target="_blank">查看演示</a></div>
<p>你可以准备很多张背景图,并且背景图的切换都是随机的,不过由于每次刷新一次页面都会加载一个背景图片,这在一定程度上增大了服务器的负载。不过这些都不是本文讨论的范畴,看看下面的JavaScript代码:</p>

阅读全文 »