通过这个操作,自己对js有了更深一层的理解.js是什么呢?
js是操作浏览器的语言.有什么用呢?
可以在客户的游览器动态加载一些内容上去.它是怎么样做的?
先要明白一些基本的原理,游览器显示html文本,是将它的<>标签都在内存中建成对象用来显示.加上游览器本身的对象,我们就可以用js用操作这些对象,从而达到添加删除html标签对象,给html对象的属性赋值,加内容等.
以下是详细的操作过程.
一.问题提出,想将下面代码改为用js在运行时加载.
- <html>
- <head>
- <title>
- test marquee!
- </title>
- </head>
- <body>
- <marquee id="zhao" direction="up" scrollamount=6 scrolldelay=50 scrollAmount=10 onmouseout="this.start()" onmouseover="this.stop()" width="177px" style="height: 540px">
- <img id="ImgUserControl1_img1" border="0" src="DefaultImg/企业首页图片1.jpg" style="height:150px;width:177px;border-width:0px;WIDTH: 177px; HEIGHT: 150px" /><BR />
- <img id="ImgUserControl1_img2" border="0" src="DefaultImg/企业首页图片2.jpg" style="height:150px;width:177px;border-width:0px;WIDTH: 177px; HEIGHT: 150px" /><BR />
- <img id="ImgUserControl1_img3" border="0" src="DefaultImg/企业首页图片3.jpg" style="height:150px;width:177px;border-width:0px;WIDTH: 177px; HEIGHT: 150px" /><BR />
- <img id="ImgUserControl1_img4" border="0" src="DefaultImg/企业首页图片4.jpg" style="height:150px;width:177px;border-width:0px;WIDTH: 177px; HEIGHT: 150px" /><BR />
- <img id="ImgUserControl1_img5" border="0" src="DefaultImg/企业首页图片5.jpg" style="height:150px;width:177px;border-width:0px;WIDTH: 177px; HEIGHT: 150px" /><BR />
- </marquee>
- </body>
- </html>
二.查看 DHTML对象,看marquee标签对象有什么方法可以在用js 得到后用来加入文本.有什么事件可以起到运行时加载的.
A:添加html内容(insertAdjacentHTML和insertAdjacentText)
运行时触发的事件是body 的onload
http://www.phpx.com/man/dhtmlcn/objects/BODY.html
http://www.w3school.com.cn/js/js_reference.asp
三.查一下这方法怎么样用.因为上面网站查到的只有方法而没有参数.
原型:insertAdajcentHTML(swhere,stext)
insertAdjacentHTML方法:在指定的地方插入html标签语句
参数:
swhere: 指定插入html标签语句的地方,有四种值可用:
1.beforeBegin: 插入到标签开始前
2.afterBegin:插入到标签开始标记之后
3.beforeEnd:插入到标签结束标记前
4.afterEnd:插入到标签结束标记后
stext:要插入的内容
insertAdjacentText方法与insertAdjacentHTML方法类似,只不过只能插入纯文本,参数相同
- <html>
- <head>
- <script language="javascript">
- function myfun()
- {
- var obj = document.getElementById("btn1");
- obj.insertAdjacentHTML("afterEnd","<br><input name=/"txt1/">");
- }
- </script>
- </head>
- <body>
- <input name="txt">
- <input id="btn1" name="btn1" type="button" value="更多..." onclick="myfun()">
- </body>
- </html>
http://hi.baidu.com/inpunis/blog/item/9016fe2de0b07531349bf794.html
四..写出了代码
- <html>
- <head>
- <title>
- test marquee!
- </title>
- <SCRIPT language=javascript>
- function myfun()
- {
- var zhao= document.getElementById("zhao");
- for(i = 1;i<=5;i++)
- {
- zhao.insertAdjacentHTML("beforeEnd","<img id='ImgUserControl1_img" + i + "' border='0' src='DefaultImg/企业首页图片" + i + ".jpg' style='height:150px;width:177px;border-width:0px;WIDTH: 177px; HEIGHT: 150px' /><BR />");
- }
- }
- </SCRIPT>
- </head>
- <body onload="myfun()">
- <marquee id="zhao" direction="up" scrollamount=6 scrolldelay=50 scrollAmount=10 onmouseout="this.start()" onmouseover="this.stop()" width="177px" style="height: 540px">
- </marquee>
- <input id="btn1" name="btn1" type="button" value="更多..." onclick="myfun()">
- </body>
- </html>
js还可以用HTML元素的属性去设置
innerHTML | 设置或获取位于对象起始和结束标签内的 HTML。
|
innerText | 设置或获取位于对象起始和结束标签内的文本。 |
outerHTML | 设置或获取对象及其内容的 HTML 形式。 |
outerText | 设置或获取对象的文本。 |