手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表全部文章

测试insertAdjacentElement

Submitted by gouki on 2011, August 24, 12:12 AM

和insertAdjacentHtml等方法类似，只是一个插对象，一个插具体内容，其实都一样啦。
介绍：
语法：
oElement = object . insertAdjacentElement ( sWhere , oElement )
参数：
oElement :　必选项。对象(Element)。要插入到 object 邻近的对象。
sWhere :　必选项。字符串(String)。beforeBegin | afterBegin | beforeEnd | afterEnd beforeBegin :　将 oElement 插到 object 的开始标签之前。
afterBegin :　将 oElement 插到 object 的开始标签之后。但是在 object 的所有原有内容之前。
beforeEnd :　将 oElement 插到 object 的结束标签之前。但是在 object 的所有原有内容之后。
afterEnd :　将 oElement 插到 object 的结束标签之后。
返回值：
oElement :　对象(Element)。返回插入的对象的引用。
说明：
将 oElement 依据 object 定位插入文档结构。
当文档正在载入时，不可以尝试此方法。必须在 onload 事件触发以后。
假如你尝试插入一个已经在文档结构中存在定位的对象，该对象将被移动到你指定的插入位置，而不会有新对象被创建。 【这个功能好啊。不会创建出同名元素等】
测试代码：

XML/HTML代码
  1. <script>  
  2.     var i_nowheight = 250;  
  3.     function rdl_doApply(e) {  
  4.         with (document.all("oSelect1")) var sParam1 = options[selectedIndex].value;  
  5.         with (document.all("oSelect2")) var sParam2 = options[selectedIndex].value;  
  6.         var oNewNode = document.createElement(sParam1);  
  7.         oList.insertAdjacentElement(sParam2, oNewNode);  
  8.         oNewNode.innerText = sParam2  
  9.         i_nowheight += 30;  
  10.         window.resizeTo(360, i_nowheight);  
  11.     }  
  12. </script>  
  13. <div id=oCode>  
  14.     <ul id=oList>  
  15.         <li>列表项目1  
  16.         <li>列表项目2  
  17.     </ul>  
  18. </div>  
  19. <table height=56>  
  20.     <tr>  
  21.         <td><select style="width:100px;" id=oSelect1>  
  22.             <option value="button" selected>button</option>  
  23.             <option value="b">b</option>  
  24.         </select></td>  
  25.         <td><select style="width:100px;" id=oSelect2>  
  26.             <option value="beforeBegin" selected>beforeBegin</option>  
  27.             <option value="afterBegin">afterBegin</option>  
  28.             <option value="beforeEnd">beforeEnd</option>  
  29.             <option value="afterEnd">afterEnd</option>  
  30.         </select></td>  
  31.         <td><input type=button value=" 插入 " onclick="rdl_doApply()"></td>  
  32.     </tr>  
  33. </table>  

 

Javascript | 评论:0 | 阅读:15175

测试insertAdjacentHTML

Submitted by gouki on 2011, August 24, 12:03 AM

无它，纯学习的代码，看效果用的。纠结啊，原来好多JS中的方法都没有用过。亏我以前还想转前端：

insertAdjacentText方法，在指定的地方插入html内容和文本内容。
insertAdjacentHTML方法：在指定的地方插入html标签语句

原型：insertAdajcentHTML(swhere,stext)
参数：
swhere: 指定插入html标签语句的地方，有四种值可用：
1.     beforeBegin: 插入到标签开始前
2.     afterBegin:插入到标签开始标记之后
3.     beforeEnd:插入到标签结束标记前
4.     afterEnd:插入到标签结束标记后
stext：要插入的内容

参考：http://blog.csdn.net/helanye/article/details/4496061
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title>测试insertAdjacentHTML</title>  
  6.     <script language="javascript"><!--  
  7.     function addsome() {  
  8.         document.getElementById('test').insertAdjacentHTML("afterBegin", "<h1>在文本前容器内插入内容afterBegin</h1>");  
  9.         document.getElementById('test').insertAdjacentHTML("beforeEnd", "<h2>在文本后容器内插入内容beforeEnd</h2>");  
  10.         document.getElementById('test').insertAdjacentHTML("beforeBegin", "<h4>beforeBegin在文本前容器外插入内容</h1>");  
  11.         document.getElementById('test').insertAdjacentHTML("afterEnd", "<h5>afterEnd在文本后容器外插入内容</h2>");  
  12.     }// --></script>  
  13. </head>  
  14. <body onload="addsome()">  
  15. <div id="test">原始内容</div>  
  16. </body>  
  17. </html>  

效果：

FF下无效，IE下有效。webkit下有效。
Over

Javascript | 评论:0 | 阅读:15471

CSS border-top-width 属性

Submitted by gouki on 2011, August 23, 1:26 PM

看到这个CSS属性的时候，我真的纠结了半天，border-top-width，看这个词组的含义，我还以为是边框顶部的宽度，最初我以为是边框边的宽度，但看了手册后，才发现原来是BODER的高度，粗细之类的。

后来看到了这里的介绍：http://school.mzoe.com/css/pr_border-top_width.html，才小小的了解了一点：

定义

border-top-width 属性设置元素的上边框的宽度。

只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。

注释：请始终把 border-style 属性声明到 border-width 属性之前。元素只有在获得边框之后，才能改变其边框的宽度。

-------

同时也介绍了说这个值是可以通过JS来改变的。反正不管怎么样，我已经明白了

Javascript | 评论:0 | 阅读:13937

参考：getBoundingClientRect方法

Submitted by gouki on 2011, August 23, 11:13 AM

看到getBoundingClientRect方法，是用phpstorm进行跳转的，跳转到原始文件中，居然提示我是@browser IE，@return TextRange
一下子就闷了，还好有google，找到了一篇 文章（不好意思，不是专业做前端的，对于这些函数所以都不太了解，也没有去看什么 w3cschool之类的教程）
找到了这篇 文章才知道：

http://younglab.blog.51cto.com/416652/386540
  1. /** 
  2.  * 这原本是IE中获取页面中某个元素位置的方法 ，【相对于浏览器左上角】 
  3.  * FF在3.0中也提供这个方法，在3.5还能获取元素高度和宽度属性 
  4.  * IE中会比其他浏览器多出2个像素 
  5.  * return{left,top,right,bottom,width,height} 
  6.  */  

OK，我也不多介绍了，看一下原文中对于这一点是怎么解释的：

XML/HTML代码
  1. 页面左上角由一个元素，紧贴浏览器的左边和上边，在除IE外的浏览器，包括基于IE内核的搜狗浏览器（360垃圾浏览器及TT浏览器未测试）都能正确的获取到各个属性的值，而在IE中，每个值都会比正常值多出两个像素，例如，正常的left值为0，在IE中为2；  
  2.   
  3. 这是因为IE中document.documentElement.clientTop并不为0（尽管已设置html、body的margin和padding为0），所以在IE中获得的值要减去document.documentElement.clientTop的值。  

更多的资料还是去看原文吧：http://younglab.blog.51cto.com/416652/386540

Javascript | 评论:0 | 阅读:15713

棒约翰的PIZZA

Submitted by gouki on 2011, August 22, 10:09 PM

嗯，这里不是在做广告
主要是昨天小朋友参加了某保险公司的一个小活动，其实 也是棒约翰举办的一个小活动。
想来和肯德基一样，是做为那种亲子活动或者是其他的一些活动一样。
小朋友和我们一起去逛了一下，玩的非常开心，看到服务员在做pizza，并同时自己放上了那些作料之类的，小东西非常非常开心
他们还参观了棒约翰的厨房，估计他也记不住有啥东西。
对于他来说，可能做pizza的游戏和吃pizza是最开心的事情了。
晚上回到家中，兴奋和每个人在说自己做pizza了。（其实就是服务员做完面饼，他们只是放了放作料而已）

Tags: 棒约翰, pizza

Baby | 评论:0 | 阅读:14757

Records:3097«‹259260261262263264265266267268›»