HTML DOM innerHTML 属性及实现图片连续播放
定义和用法
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
语法
tablerowObject.innerHTML=HTML
实例
下面的例子返回了表格行的 inner HTML:
<html>
<head>
<script type="text/javascript">
function getInnerHTML()
{
alert(document.getElementById("tr1").innerHTML);
}
</script>
</head>
<body> <table border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="getInnerHTML()"
value="Alert innerHTML of table row" /> </body>
</html>
使用innerHTML 来实现图片的连续播放
<script type=text/javascript>
var speed=30
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0
}
else{
demo.scrollLeft++
}}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
注:scrollLeft代表页面利用滚动条滚动到右侧时,隐藏在滚动条左侧的页面的宽度;
scrollWidth获取对象的滚动宽度;
详细解释:http://bluenemo.iteye.com/blog/1263429
<div id=demo style="OVERFLOW: hidden; WIDTH: 760px; align: center">
<table cellspacing="0" cellpadding="0" align="center"
border="0">
<tbody>
<tr>
<td id="marquePic1" valign="top"> <table width="958" height="130" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="95" height="110" align="center">1</td>
<td width="95" align="center">2</td>
<td width="95" align="center">3</td>
<td width="95" align="center">4</td>
<td width="95" align="center">5</td>
<td width="95" align="center">6</td>
<td width="95" align="center">7</td>
<td width="95" align="center">8</td>
<td width="95" align="center">9</td>
<td width="103" align="center">0</td>
</tr>
<tr>
<td height="20" align="center" bgcolor="#CCCCCC"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center" bgcolor="#FFFF99"> </td>
</tr>
</table> </td>
<td id="marquePic2" valign="top"></td>
</tr>
</tbody>
</table>
</div>
HTML DOM innerHTML 属性及实现图片连续播放的更多相关文章
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- CSS :first-child 选择器 和 HTML DOM firstChild 属性
CSS 选择器参考手册 实例 选择属于其父元素的首个子元素的每个 <p> 元素,并为其设置样式: p:first-child { background-color:yellow; } 亲自 ...
- 标签的innerHTML属性和html()
在新公司开发编码的时候,经常写js代码:有时候就需要往某个标签里添加一些html脚本或者要拿到某个标签里的html脚本,那么就会用到innerHTML和html. 1.innerHTML属性 w3sc ...
- innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
innerHTML属性用来读取或设置某个节点内的HTML代码. outerHTML属性用来读取或设置HTML代码时,会把节点本身包括在内. textContent属性用来读取或设置节点包含的文本内容. ...
- js dom element 属性整理(原创)
最近去几家公司面试,发现大多数时候面试的内容考的都是原生的js语法和属性,所以我决心整理一下原生的dom元素的属性. 首先,我我们需要获取一个element元素 <li id="2&q ...
- 剑指前端(前端入门笔记系列)——DOM(属性节点)
DOM(属性节点) 属性节点没有过参加家族关系中,其专用选择器:attributes,返回值为对象的形式,它的键是索引值,也就是用对象模拟了一个伪数组,DOM中选择器返回的都是伪数组(可以使用数组的形 ...
- 使用innerHTML属性向head中插入字符时报“无法设置 innerHTML 属性。 该操作的目标元件无效”的错误
向head中动态插入script文件,代码如下: var sc = document.createElement("script"); sc.src = "//www.c ...
- innerHTML属性的内存和性能问题
使用innerHTML替换子节点可能会导致浏览器的内存占用问题,尤其是在IE中,问题更加明显.在删除带有时间处理程序或引用了其他js对象子树是,就有可能导致内存占用问题.假设某个元素有一个事件处理程序 ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
随机推荐
- 网站开发进阶(三十)HTML5--本地存储Web Storage
HTML5--本地存储Web Storage Web Storage功能,顾名思义,就是在Web上针对客户端本地储存数据的功能,具体来说Web Storage分为两种: sessionStorage: ...
- 从"按层次输出二叉树"到"求解二叉树深度"的总结
本文是在学习中的总结,欢迎转载但请注明出处:http://write.blog.csdn.net/postedit/41964669 最近在刷LeetCode上的算法题,发现好多题目的解题思路大体是一 ...
- nginx 编译增加新的模块
原已经安装好的nginx,现在需要添加一个未被编译安装的模块: nginx -V 可以查看原来编译时都带了哪些参数 原来的参数:--prefix=/app/nginx 添加的参数: --with-ht ...
- Mondrian Schema workbench工作界面 简介(实在懒得写,居然有人弄了,收藏了)
转自:http://hi.baidu.com/dinguangx/item/37e78be29aebc1adcf2d4f89 Schema Schema 定义了一个多维数据库.包含了一个逻辑模型,而这 ...
- Linux常用命令(第二版) --文件管理命令
文件管理命令 并不建议:照着像命令大全这类的书来学! 常用命令大约有200个. 文件命名规则: a)除了'/'之外所有字符都合法! b)这些字符最好不用 1.空格符,制表符,退格符 2.连接符 3.特 ...
- C++对txt文本进行读写操作
输入输出,是每个程序员的基本功,尤其是对文本的输入和输出.最近,自己在这方面做了一些总结,不是很全面,希望在以后学习和工作的过程中慢慢补充,积累点点滴滴.P.S. 今天天气不错,雾霾散了,天空晴朗,惠 ...
- Linux - grep的一些进阶选项
[root@www ~]# grep [-A] [-B] [--color=auto] '搜寻字串' filename 选项与参数: -A :后面可加数字,为 after 的意思,除了列出该行外,后续 ...
- Oracle rownum 分页, 排序
Oracle rownum 分页, 排序 什么是rownum, rownum的生成, rownum相关的符号操作 Rownum是oracle生成结果集时得到的一个伪列, 按照读出行的顺序, 第一条ro ...
- 一行代码实现FMDB的CURD操作
上次实现FMDB的CURD基本操作后,用在项目里,每个实体类都要写SQL语句来实现创建表和CURD操作,总觉得太麻烦,然后就想着利用反射和kvc来实现一个数据库操作的基类继承一下,子类只需要继承,然后 ...
- C/C++创建多级目录
常常需要在非MFC的环境下创建目录,尤其是多级目录,这里写了一个创建多级目录的子函数CreateDir,以后需要就可以直接拿来用了. #include <string> #include ...