DOM
iteye_12132
这个作者很懒,什么都没留下…
展开
-
CSS圆角实现
[b]1.方法一:上下两张带圆角的图片。宽度固定,允许高度变动.[/b][code="html"]HeadlineContent.box {width: 418px;background: #effce7 url(images/bottom.gif) no-repeat left bottom;}.box h2 {background: url(im...2010-08-20 16:28:15 · 149 阅读 · 0 评论 -
上下滚动新闻
[b]连续滚动:[/b]该方法要求内容(contentDiv)的高度应该大于其容器(demo)的高度,然后复制一份内容,通过不断修改容器的scrollTop,来使得可见内容变化。(基本代码来自网上)[code="html"] 三列自适应宽度液态布局 Accessibility和General Developer工具 未知总宽度的列表菜单水平居...原创 2010-07-23 11:43:00 · 105 阅读 · 0 评论 -
左右滚动的图片展示
[code="html"] [/code][code="html"].imgCls{ width:150px; height:150px; padding:0px; margin-top:3px;}a img { border:none;}#demo{ ...2010-07-23 11:48:56 · 168 阅读 · 0 评论 -
折叠导航菜单
[code="html"] Recipes Starters Main Courses Desserts Contact Us Starters Main Courses Desserts Articles Buy Onlinesome other content...2010-07-23 17:01:28 · 232 阅读 · 0 评论 -
表单提交至iframe
[code="html"].................... ......[/code][code="js"] var form = document.getElementById("fabokeForm"); /**/ var iframe = document.getElementById("hiddenI...2013-05-14 11:20:34 · 712 阅读 · 0 评论 -
select,option 元素的DOM操作:
[code="js"]select 元素常用属性(方法): add(newOption, relOption) — 添加新的option元素在relOption元素之前。 multiple — Boolean值。默认值为false,select 元素默认单选。 remove(index) — 删除索引为index的option元素。 selectedI...2012-08-16 14:28:58 · 568 阅读 · 0 评论 -
关于getBoundingClientRect 与 getClientRects
getBoundingClientRect 可以用来获取 元素 相对视图左上角的位置。它的返回值是一个对象,包含4个属性:{top:0,left:0,bottom:0,right:0}, ——FirefoxV3.1+扩展了该对象,添加了width,height属性。 默认它是不计算页面的滚动距离的,跨浏览器的解决方案,可以参考jQuery的offset方法。 ...2012-08-19 14:29:47 · 364 阅读 · 0 评论 -
页面布局:分5个区域
[code="html"]*{margin:0;padding:0;}body{width:100%;height:100%;overflow:hidden;}.viewPort{position:absolute;width:100%;height:100%;overflow:hidden;}.top,.bottom,.left,.right,.inner...2013-05-15 17:19:31 · 1766 阅读 · 0 评论 -
备份一个简单的分页条
[code="html"] /15 [/code][code="css"].pageBar{text-align:right;margin:18px 20px 18px 0;}.pageBar .link{display:inline-block;padding:2px 8px;margin:2px;c...2013-07-20 10:57:45 · 60 阅读 · 0 评论 -
动态添加style元素
[code="js"]/** * @description IE6~9下,页面的样式规则有如下限制: * 1)link+style元素的个数不能大于31个; * 2)单个css文件的rule条数,不能大于4095条; * 3)@import 命令不能嵌套超过4层。 * * 文件处理了动态加载 link/style元素的情况,但不能处理页面一开始就已经违反了限制...2013-09-03 15:42:28 · 2870 阅读 · 0 评论 -
将文本转换为dom节点
[code="js"]jQuery(document).ready(function(){ var reg = /(http:\/\/(item|detail)\.(taobao|tmall)\.com\/item\.htm\?(.+?&)*id=(\d+)(&.+?)*)(\s+|[\u4E00-\u9FA5])/i; var blockId = "xxx"; ...2012-11-30 17:05:39 · 836 阅读 · 0 评论 -
css3的饼图
来自:http://atomicnoggin.ca/test/pie-chart.html[code="html"]Pure CSS3 Pie Chartsbody { font-family:Tahoma, Geneva, sans-serif;}h2 { text-align:center;}.chart { position:r...原创 2013-12-31 15:12:32 · 428 阅读 · 0 评论 -
执行innerHTML时候,代码片段的js
[code="html"] 大屏幕 var excScript = (function(){ var timer = 0, repeat = 0, head = document.getElementsByTagName("head")[0], queue = [];...2014-01-21 14:13:37 · 174 阅读 · 0 评论 -
css3 简单slider
[code="html"] 大屏幕 .sliderBox{height:12em;position:relative;overflow: hidden;} .slider{position:absolute;width:100%;height:100%;} .slider li{position:absolute;top:...2014-01-24 15:16:24 · 1290 阅读 · 0 评论 -
一个简单的遮盖层
[code="js"].opacity{filter:alpha(opacity=50);-moz-opacity:0.5; opacity: 0.5; }function Mask(){ var fl = document.documentElement.style.overflow; document.documentElement.style.overf...2010-07-15 15:44:45 · 127 阅读 · 0 评论 -
动态加载JS/CSS文件--改进版
[code="js"]function loadScript(url, callback,targetWin) { if(!targetWin) targetWin = self; var script = targetWin.document.createElement("script") script.type = "text/java...2011-01-11 17:22:42 · 88 阅读 · 0 评论 -
DOM操作:insertAdjacentHTML与Range的实现
[b]利用insertAdjacentHTML与Range实现DOM操作,可以允许我们把一串字符串快速的转变为DOM元素,并插入到文档中的具体位置。[/b][code="js"]function fn(){//IE 和 Chrome var str = 'Content here'; var b = document.getElementById("b"); //b.ins...2010-08-20 16:39:36 · 85 阅读 · 0 评论 -
深度遍历节点
[code="js"]function tranverse(el,lv){ if(el.nodeType == 1 || el.nodeType == 9){ var name = el.nodeName.toString() + ""; lv.push('>'); for(var i=0,len = el.childNodes.length; i < len;i++...2010-10-27 10:15:18 · 148 阅读 · 0 评论 -
HTML Element对象的属性遍历
对于HTML Element对象,存在属性 attributes,包括了对象“所有”属性,通过对其遍历,可以获取我们所需要的信息,以便对DOM节点做进一步的处理,例如将DOM结构保存为XML或者字符串等。[code="js"]function outputAttributes(element){ var pairs = new Array(); for(var i=0,...原创 2010-06-09 14:54:50 · 1846 阅读 · 0 评论 -
DOM对象属性的设置与获取
有两种方式可以修改DOM对象的属性:[b]"."运算符 和 getAttribute(setAttribute)方法。[/b]区别如下:[code="html"][/code][code="js"]var e = document.getElementById('test');//获取属性//用 . 来引用,必须是内置的(IE 可以访问自定义属性),而且引用...原创 2010-06-09 17:18:29 · 742 阅读 · 0 评论 -
动态加载JS/CSS文件
动态加载JS/CSS文件,可以判断是否加载完毕。[code="js"]function loadScript(url, callback) { var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState) { // IE scrip...原创 2010-06-17 09:59:31 · 83 阅读 · 0 评论 -
document对象学习
[b]getElementById方法[/b][code="html"]test world[/code][code="js"] var e = document.getElementById('div2'); //1,DIV,null alert("nodeType:" + e.nodeType + "\n" + "nodeNam...2010-07-08 14:28:28 · 78 阅读 · 0 评论 -
节点间关系访问
[b]访问子节点:[/b]1. someNode.childNodes:返回一个NodeList对象,提供item(i)方法访问里面的元素。由于这也是一个类数组的对象,因此可以通过'[i]'获取里面的元素,通过length属性获取元素个数。2. someNode.hasChildNodes():判断是否存在子节点,true如果节点下有子节点。3.第一个和最后一个节点也可...2010-07-08 20:40:20 · 122 阅读 · 0 评论 -
DOM节点的创建与操作
[b]document.createElement(element): 创建一个标签为element的Element节点。[/b]注意: 在HTML中,element大小写不敏感;在XML(XHTML)中大小写敏感。例子:[code="js"] var el = document.createElement("div"); el.id = "myDiv...2010-07-10 19:46:15 · 121 阅读 · 0 评论 -
input 输入框的提示与取值
以下代码基本实现关于在输入框设置提示语言的功能:[code="html"].textTips{ color:gray !important;}.textNormal{ color:black;}someTips here[/code][code="js"]function init(){ var area = documen...2010-07-10 20:00:28 · 476 阅读 · 0 评论 -
DOM树添加script脚本和style样式
[b]添加javascript脚本:[/b]如果要添加以下脚本到DOM文档页面中:[code="js"] function sayHi(){ alert("hi"); }[/code]运用DOM节点操作的知识,我们可能会这样写:[code="js"]var script = document.createElement('script');scri...2010-07-12 10:57:23 · 222 阅读 · 0 评论 -
节点间"包含"关系的访问
判断2个节点间是否存在包含关系,即是否存在父子之间的关系,我们可以使用:elA.contains(elB)方法,如果elA是elB的祖先,则返回true.//判断 <html>元素是否包含<body>元素alert(document.documentElement.contains(document.body)); //trueIE,Chrome...2010-07-12 11:09:41 · 117 阅读 · 0 评论 -
innerText与innerHTML
[b]innerText:获取某元素下面的所有文本内容.[/b]注意:IE ,CHROME支持 innerText ,Firfox不支持,不过它使用另一个类似的属性textContent.[code="html"] div1-2 textx number1number2number3number4 [/code][code="js"]...2010-07-12 11:19:12 · 74 阅读 · 0 评论 -
CSS相关的DOM操作
1.设置元素的float属性:由于float在javascript里面是关键字,因此,对于float的设置,在Firefox,Chrome中,使用 [b]cssFloat[/b]代替,在IE 中,使用[b]styleFloat[/b]代替。2.对于css属性中,用'-'连接的属性,如background-color等,在读写的时候,要求转化为驼峰写法,如:background-co...2010-07-13 09:34:24 · 127 阅读 · 0 评论 -
innerText VS textContent
Firefox: textContent 会把内联的style、scirpt元素的内容读取出来,不支持 innerText。Opera:textContent都会把内联的style、scirpt元素的内容读取出来,innerText的表现同textContent一致。IE6~8: innerText不会读取内联样式、script;不支持textContentIE9+: text...2013-04-28 13:35:13 · 120 阅读 · 0 评论