网页 JavaScript的DOM操作
今天,我首先对之前学习的内容进行了复习,然后学习了当鼠标指向某一个按钮时,切换对应的背景图片。
<div id="d1">
</div>
<input type="button" value="1" onmouseover="dj1()" id="j1" class="c1" style="background-color:#6F3"/>
<input type="button" value="2" onmouseover="dj2()" id="j2" class="c1"/>
<input type="button" value="3" onmouseover="dj3()" id="j3" class="c1"/>
<script>
var a=document.getElementById("j1");
var b=document.getElementById("j2");
var c=document.getElementById("j3");
function dj1()
{
var aa=document.getElementById("d1");
aa.style.backgroundImage="url(6UPCKHIN3K5O0006.jpg)";
a.style.backgroundColor="#6F3";
b.style.backgroundColor="#CCC";
c.style.backgroundColor="#CCC";
}
function dj2()
{
var aa=document.getElementById("d1");
aa.style.backgroundImage="url(22.jpg)";
a.style.backgroundColor="#CCC";
b.style.backgroundColor="#6F3";
c.style.backgroundColor="#CCC";
}
function dj3()
{
var aa=document.getElementById("d1");
aa.style.backgroundImage="url(002-1.jpg)";
a.style.backgroundColor="#CCC";
b.style.backgroundColor="#CCC";
c.style.backgroundColor="#6F3";
}
</script>
之后,我学习了利用Window.document操作内容、样式和属性。
alert(a.innerHTML);标签里的html代码和文字都获取了
a.setAttribute("属性名","属性值");设置一个属性,添加或更改都可以;
a.getAttribute("属性名");获取属性的值;
a.removeAttribute("属性名");移除一个属性;
网页 JavaScript的DOM操作的更多相关文章
- 第一百一十六节,JavaScript,DOM操作样式
JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
- 第一百一十五节,JavaScript,DOM操作表格
JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...
- Python之路day13 web 前端(JavaScript,DOM操作)
参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...
- 网站开发综合技术 三 JavaScript的DOM操作
第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...
- JavaScript:DOM操作
一.DOM基础DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某 ...
- JavaScript之DOM操作,事件操作,节点操作
1,DOM操作 1.1 概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...
- Javascript的DOM操作 - 你真的了解吗?
摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...
- HTML JavaScript的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...
- JavaScript的DOM操作(2)
补充: 回车符\r和换行符\n的区别:\r 相当于enter,是段落与段落之间的区别, \n 相当于shift+enter,是行与行之间距离,比较小 几种window操作方法: 1.获取当前窗口大 ...
随机推荐
- PHP的ip2long和long2ip函数的实现原理
最近要做个十进制数字的可逆转换做邀请码,一直没搞清楚怎么弄的,实在太复杂了,今天弄IP时想到这个可以进行转换,于是研究了下原理: 主要是自己整理了下: $ip = '12.34.56.78'; $ip ...
- Web流量劫持
BadTunnel实战之远程劫持任意内网主机流量 http://www.freebuf.com/articles/web/109345.html http://blog.csdn.net/ts__cf ...
- kuangbin专题一 简单搜索
弱菜做了好久23333333........ 传送门: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=105278#overview A ...
- 一个简单sql注入的poc
最近在提高自己编程能力,拿一些实用的小工具练下.该脚本为python语言,主要涉及模块urllib,re. 功能:验证CmsEasy5.5爆账号密码 实验用源码:http://pan.baidu.co ...
- 字符串---分割成数组(str_split ),算出一个字符串中出现最多的字符, 学校中最多的姓名
split 分割separate分开 little 小的 echo '<meta http-equiv="Content-type" content="text/h ...
- c#语言简介
语言的历史:c,c++,java,c#, c语言最早,c++语言复杂,而java把其中难的一部分去掉,也成为c--,而c#早期类似java. c#简单高效,并且与web结合. C#的运行环境是.net ...
- 使用android的mediaplayer做成 一个demo,欢迎测试使用
附件是为一个定制视频产品而简单的写了一个demo,用来说明android的mediaplayer是如何使用的. http://files.cnblogs.com/guobaPlayer/palyerD ...
- Jenkins2.32.1+svn+maven安装配置与构建部署
这两天学习了一下持久化集成工具Jenkins,在自己的本地搭建一个简单的Jenkins环境. 使用环境:Windows64系统,JDK1.8,eclipse,svn(Windows版本VisualSV ...
- iOS 如何随意的穿插跳跃,push来pop去
OS 如何随意的穿插跳跃,push来pop去 主题思想:如A.B.C.D 四个视图控制器 想要在 A push B 后, B 在push 到 D ,然后从 D pop 到 C ,在从 C pop 的A ...
- Debian搭建PPTPD
先安装pptpd: apt-get install pptpd 编辑 /etc/pptpd.conf #取消下面两行的注释,在文件的底部. # localip 192.168.0.1 # remote ...