定义和用法

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">&nbsp;</td>

     <td align="center">&nbsp;</td>

     <td align="center">&nbsp;</td>

     <td align="center">&nbsp;</td>

     <td align="center">&nbsp;</td>

     <td align="center">&nbsp;</td>

     <td align="center">&nbsp;</td>

     <td align="center">&nbsp;</td>

     <td align="center">&nbsp;</td>

     <td align="center" bgcolor="#FFFF99">&nbsp;</td>

   </tr>

 </table>        

         </td>

         <td id="marquePic2" valign="top"></td>

       </tr>

     </tbody>

   </table>

 </div>

HTML DOM innerHTML 属性及实现图片连续播放的更多相关文章

  1. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  2. CSS :first-child 选择器 和 HTML DOM firstChild 属性

    CSS 选择器参考手册 实例 选择属于其父元素的首个子元素的每个 <p> 元素,并为其设置样式: p:first-child { background-color:yellow; } 亲自 ...

  3. 标签的innerHTML属性和html()

    在新公司开发编码的时候,经常写js代码:有时候就需要往某个标签里添加一些html脚本或者要拿到某个标签里的html脚本,那么就会用到innerHTML和html. 1.innerHTML属性 w3sc ...

  4. innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解

    innerHTML属性用来读取或设置某个节点内的HTML代码. outerHTML属性用来读取或设置HTML代码时,会把节点本身包括在内. textContent属性用来读取或设置节点包含的文本内容. ...

  5. js dom element 属性整理（原创）

    最近去几家公司面试,发现大多数时候面试的内容考的都是原生的js语法和属性,所以我决心整理一下原生的dom元素的属性. 首先,我我们需要获取一个element元素 <li id="2&q ...

  6. 剑指前端（前端入门笔记系列）——DOM（属性节点）

    DOM(属性节点) 属性节点没有过参加家族关系中,其专用选择器:attributes,返回值为对象的形式,它的键是索引值,也就是用对象模拟了一个伪数组,DOM中选择器返回的都是伪数组(可以使用数组的形 ...

  7. 使用innerHTML属性向head中插入字符时报“无法设置 innerHTML 属性。 该操作的目标元件无效”的错误

    向head中动态插入script文件,代码如下: var sc = document.createElement("script"); sc.src = "//www.c ...

  8. innerHTML属性的内存和性能问题

    使用innerHTML替换子节点可能会导致浏览器的内存占用问题,尤其是在IE中,问题更加明显.在删除带有时间处理程序或引用了其他js对象子树是,就有可能导致内存占用问题.假设某个元素有一个事件处理程序 ...

  9. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

随机推荐

  1. java单链表常用操作

    总结提高,与君共勉 概述. 数据结构与算法亘古不变的主题,链表也是面试常考的问题,特别是手写代码常常出现,将从以下方面做个小结 [链表个数] [反转链表-循环] [反转链表-递归] [查找链表倒数第K ...

  2. Intellij Idea配置提高速度

    主要介绍一下Intellij Idea的关于速度和最大最大方法数目 提高速度 1.命令: 2.找到./Library/Preferences/IntelliJIdea2016.1/idea.vmopt ...

  3. rambbit mq 安装

    https://blog.csdn.net/lmjy102/article/details/78571078 http://www.rabbitmq.com/tutorials/tutorial-on ...

  4. Git添加文件改动时出错

    原来的主文件夹中替换了3个子文件夹,每个子文件夹有若干同名文件,总共替换了大概200多个文件吧. 然后在git主文件夹中使用git add .指令出现如下错误: apple@kissAir: iOS$ ...

  5. 极光推送iOS SDK教程

    iOS SDK 调试指南 iOS 调试思维导图 2 确认证书 请到"应用详情页面"确认证书可用性: 3 开发环境测试 在对  JPush iOS 开发环境进行测试前,请确保 3 个 ...

  6. 【测试】Gunicorn , uWSGI同步异步测试以及应用场景总结

    最近使用uwsgi出了一些问题,于是测试下Gunicorn测试对比下 环境 一颗cpu 1g内存 Centos系统 Django作为后端应用,Gunicorn默认模式和异步模式,响应基本是无阻塞类型 ...

  7. Eclipse集成Android_NDK

         Eclipse集成Android NDK说明 2          为什么要用NDK? 以下内容引用自<Pro Android Games> Some Java develo ...

  8. Swing组件 创建窗口应用

    package com.swing; import java.awt.BorderLayout; import java.awt.event.ActionEvent; import java.awt. ...

  9. 网站开发进阶(三)Windows NAT端口映射

    Windows NAT端口映射 由于有需求进行端口映射,又不想装乱七八糟的软件,Windows本身自带的路由远程访问配置太麻烦,还要两块网卡,坑爹啊. 其实Windows本身命令行支持配置端口映射,条 ...

  10. Android高级控件（二）——SurfaceView实现GIF动画架包，播放GIF动画，自己实现功能的初体现

    Android高级控件(二)--SurfaceView实现GIF动画架包,播放GIF动画,自己实现功能的初体现 写这个的原因呢,也是因为项目中用到了gif动画,虽然网上有很多的架包可以实现,不过我们还 ...