网页 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.获取当前窗口大 ...
随机推荐
- Apache 关于 mod_rewrite 遇到 %2F或%5C (正反斜杠)等特殊符号导致URL重写失效出现404的问题
.htaccess 文件 <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d Rew ...
- [UWP小白日记-5]转换MVA学院的XML字幕为SRT
开源地址:第二版开源地址GIT 暂时用不了了,在最新的WIN10 10586.494系统上回闪退,正在酝酿第二版 O(∩_∩)O哈哈~ 新版已经完工:第二版 地方MVA上好多教程,但是微软的所有中国网 ...
- 【Python】考虑用生成器改写直接返回列表的函数
使用生成器的好处是显而易见的,可以使代码更加清晰,同时减小内存的消耗,当函数需要返回列表,把函数改写为生成器是相对容易的. 下面这两个函数返回字符串中每个单词的索引: def index_words1 ...
- putty 使用 注意事项
putty命令行模式,修改文本 小心数字小键盘 变命令!! 务必在putty--选项 Terminal->Features 里,找到 Disable application keypad mod ...
- [WPF] 为Style 里的button添加鼠标点击响应事件
一个TabControl, 用的是PagedTabControl style, 在style中有个button, button在style里已经写了click事件,但是现在还需要加上一段功能,就是在响 ...
- js输入框对金额的匹配
/** * 金额格式化 * @param s * @param n * @returns {String} */ function fmoney(s, n) { n = n > 0 && ...
- 微信小程序文档解读(一)--api提供支持有哪些
本文重点在于小程序API提供的微信功能支持及获取用户信息的解读,具体的用法和调用不在本文讨论范围之内,文章基于20161222版文档解读 API官方文档原文链接 小程序API官方定义: 框架提供丰富的 ...
- java JDBC测试
下载mysql-connector-java-5.1.31.jar添加到工程buildpath中 package com.jdbc.test; import java.sql.DriverManage ...
- Codeforces Round #346 (Div. 2) B Qualifying Contest
B. Qualifying Contest 题目链接http://codeforces.com/contest/659/problem/B Description Very soon Berland ...
- qt5.6 for android
尝试在qt下写android的程序.测试,没有编译成功. 在选项-android配置页面,提示有"Qt version for 3 architectures are missing&quo ...