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(): 从匹配的 ...
随机推荐
- [Django高级]理解django中的中间件机制和执行顺序
原文来自 Understanding Django Middlewares, 这篇文章从整体上介绍了django中中间件定义,作用,和怎么样自己写中间件 –orangleliu. 注:middlewa ...
- Linux下触摸屏驱动程序分析
[摘要: 本文以linux3.5--Exynos4412仄台,剖析触摸屏驱动焦点内容.Linux下触摸屏驱动(以ft5x06_ts为例)须要懂得以下学问: 1. I2C协定 2. Exynos4412 ...
- [信号处理技术]关于EMD的产生
通俗易懂,有助于理解EMD和HHT,就原封不动的搬过来了. 原文链接:关于EMD的产生 自傅里叶变换与频谱分析技术产生,人们得以从另外一个角度观察时域信号,信号里各个点的密集程度,得以确定性地度量.之 ...
- 常用Map实现类对比
翻译人员: 铁锚 翻译时间: 2013年12月12日 原文链接: HashMap vs. TreeMap vs. Hashtable vs. LinkedHashMap Map 是最常用的数据结构之一 ...
- javascript概要学习
Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为 ...
- 打包volley
1.如果电脑没有安装git和ant的话,需要安装git和ant,直接Google就可以,并配置环境变量 2.在命令行执行 git clone https://android.googlesource. ...
- 【一天一道LeetCode】#16. 3Sum Closest
一天一道LeetCode系列 (一)题目: Given an array S of n integers, find three integers in S such that the sum is ...
- umask函数的用法 - 如何进行权限位的设置
下面程序创建了两个文件,创建foo文件时,umask值为0,创建第二个时,umask值禁止所有组和其他用户的访问权限. 测试结果: 测试结果可以看出更改进程的文件模式掩码并不影响其父进程(常常是she ...
- Unity Socket UDP
using System.Collections; using System.Collections.Generic; using System.Net.Sockets; using System.N ...
- android studio设置代理更新
我们都知道Android Studio是基于IDEA开发的,而我们写的每一个程序又都是有Gradle构建的,Gradle的优点可以说是很多,被很多程序员夸得没边,但是它有一个特点还是值得我们注意的.我 ...