最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
详解python dict 字典 以及 赋值 引用的一些实例
时间:2017-02-09 编辑:简简单单 来源:一聚教程网
本文实例讲述了JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法。分享给大家供大家参考,具体如下:
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。例如:改变HTML元素,改变HTML属性,改变CSS样式,事件响应。
效果图:
代码:
代码如下 | 复制代码 |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
body {background-color:#eeeeee}
(一)通过 id 查找 HTML 元素
Hello world!
x = document.getElementById("hw"); document.write(' id="hw"的段落的文本是:'+x.innerHTML+' ');
functionsetCurrentTime(){ x = document.getElementById("hw"); x.innerHTML = Date() }
(二)通过 标签名 查找 HTML 元素
This is a paragragph.
This is another paragragph.
Yes you're right! This is also paragragph.
xx = document.getElementById("mainDiv"); tagContents = xx.getElementsByTagName("p"); document.write(" 使用Javascript查找id为mainDiv下的p标签的内容 ");for(i=0;;i++){ vartag = tagContents[i] if(tag!=null){ document.write(" "+tag.innerHTML+" ")}else{ document.write(" 共有"+i+"条内容 ")break; } }
(三)修改 HTML 的属性
functionchangeSrc(){ x = document.getElementById("bol"); if(x.src.match("eg_bulboff.gif")){ x.src ="images/eg_bulbon.gif" }else{ x.src ="images/eg_bulboff.gif" } }
(四)修改 CSS 样式
This is a test paragraph.
This is another paragraph.
This is HELLO WORLD.
示例文字
functionchangeTextColor(){ ele_1 = document.getElementById("para_1"); ele_1.style.color ="red"; } functionchangeTextFont(){ ele_2 = document.getElementById("para_2"); ele_2.style.fontFamily ="Arial"; } functionchangeTextSize(){ ele_3 = document.getElementById("para_3"); ele_3.style.fontSize ="larger"; } document.getElementById("para_4").style.visibility ="visible" functionchangeVisibility(){ ele_4 = document.getElementById("para_4"); if(ele_4.style.visibility.match("visible")){ ele_4.style.visibility ="hidden" }else{ ele_4.style.visibility ="visible" } }
|
-
上一个: python 查找字符串是否存在实例详解
-
下一个: php curl常用的5个经典例子
相关文章
- C语言保证每次随机值唯一算法实例 01-20
- 值得学习收藏的豆瓣API+Angular开发的web App实例 01-07
- PHP导出数据超时的优化建议解读 10-31
- PHP之mysql位运算解析 10-31
- Laravel实现登录跳转功能解析 10-31
- php双向队列解读 10-31