Element类型和HTML元素获取
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js_0321作业</title>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css"> </style>
</head>
<body> <img id="myImg" src="img/ft-top.jpg"/>
<input type="button" name="" id="btn1" value="第一题a" />
<input type="button" name="" id="btn2" value="第二题b" />
<input type="button" name="" id="btn3" value="第三题c" />
<input type="button" name="" id="btn4" value="第四题d" />
<input type="button" name="" id="btn5" value="第五题e" />
<input type="button" name="" id="btn6" value="第六题f" />
<input type="button" name="" id="btn7" value="第六题g" />
</body>
</html>
html部分
window.onload=function(){
//获取myImg元素的标签名
var b1=document.getElementById("btn1");
var myImg=document.getElementById("myImg");
if(myImg.nodeType==1){
b1.onclick=function(){
alert(myImg.tagName);
}
}
//获取myImg元素的id值和src的值,并打印输出,并修改src值
var b2=document.getElementById("btn2");
b2.onclick=function(){
alert(myImg.id);
alert(myImg.src);
alert(myImg.src="img/jddog.gif");
}
//给myImg元素添加title属性,值为“这是一个图片”
var b3=document.getElementById("btn3");
b3.onclick=function(){
alert(myImg.title="这是一个图片");
}
//给myImg元素添加“data-id属性”,值为“img001”。
var b4=document.getElementById("btn4");
b4.onclick=function(){
myImg.setAttribute("data-id","myImg001");
} //修改“data-id属性”,修改值为“image001”(方法:有则修改,无则指定)
var b5=document.getElementById("btn5");
b5.onclick=function(){
myImg.setAttribute("data-id","myimage001");
} var b6=document.getElementById("btn6");
b6.onclick=function(){
var attrs=myImg.attributes;
for(i=0;i<attrs.length;i++){
alert(attrs[i].nodeName);
alert(attrs[i].nodeValue);
}
}
//删除“data-id”
var b7=document.getElementById("btn7");
b7.onclick=function(){
myImg.removeAttribute("data-id")
}
}
Element类型和HTML元素获取的更多相关文章
- css中伪类和伪元素的区别
转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别 前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...
- 反射01 Class类的使用、动态加载类、类类型说明、获取类的信息
0 Java反射机制 反射(Reflection)是 Java 的高级特性之一,是框架实现的基础. 0.1 定义 Java 反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对 ...
- 中高级前端应该必会,js实现事件委托代理、切换样式、元素获取相对于文档位置等
1.介绍 随着组件开发大流行,现在三大框架已经基本占领了整个前端. 这时候,我们要是引入一个 jq 是不是先得你的项目非常臃肿,jq 也很不适合. 这个时候,你就需要来增加你 js 的功底. 2.各种 ...
- 第二节: Redis之Set类型和SortedSet类型的介绍和案例应用
一. Set类型基础 1. 类型说明 1个key→多个value,value的值不重复! Set一种无序且元素内容不重复的集合,不用做重复性判断了,和我们数学中的集合概念相同,可以对多个集合求交集.并 ...
- java 8 Stream中操作类型和peek的使用
目录 简介 中间操作和终止操作 peek 结论 java 8 Stream中操作类型和peek的使用 简介 java 8 stream作为流式操作有两种操作类型,中间操作和终止操作.这两种有什么区别呢 ...
- AngularJs:String类型和JSON相互转换
最近一周做了一个页面,制作的过程中遇到各种问题,从中可以看出本人的js基础还不够扎实,angularjs也只是刚入门的水平,现在将制作过程中遇到的问题一一汇总,方便以后查阅. 一.String类型和J ...
- Timestame类型和String 类型的转化
Timestame类型和String 类型的转化 String转化为Timestamp: SimpleDateFormat df = new SimpleDateFormat("yyyy-M ...
- CSS 属性 - 伪类和伪元素的区别
伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...
- CSS 属性 - 伪类和伪元素
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...
随机推荐
- 2.3Options建立配置和实体的映射「深入浅出ASP.NET Core系列」
希望给你3-5分钟的碎片化学习,可能是坐地铁.等公交,积少成多,水滴石穿,谢谢关注. Startup.cs中创建MVC中间件 关键代码:services.AddMvc();app.UseMvcWith ...
- Maven-常用插件
罗列笔者认为比较有用的一些maven打包插件,方便后续查阅 spring-boot-maven-plugin springboot自带的maven插件,可用于简单的JAR/WAR方式打包,官方地址为h ...
- .net开源工作流引擎ccflow Pop返回值设置
关键词: 点击字段弹出返回值填充文本框或其他字段 表单自动填充 .net开源工作流 jflow工作流 ccflow 工作流引擎 应用场景 当我们的查询信息比较多我们希望有一个比较 ...
- 适合精致女孩使用的APP软件 不容错过的精彩人生
阳光下灿烂,风雨中奔跑,每个人都会遇见美丽的缘分,或深或浅,或浓或淡.所以人生不管遇到什么难题,都要勇往直前.今天分享的软件也是十分精彩的,非常适合精彩的你哦! 薄荷健康 薄荷健康APP是专为想要减肥 ...
- 自定义修改Anaconda Jupyterlab Home目录
自定义修改Anaconda Jupyterlab Home目录 最近在使用Anaconda学习数据分析和机器学习,会使用到Jupyter,但是他默认目录是用户的目录,我并没有习惯将项目和资料放在C盘, ...
- Android常用的四种布局(或者说是五种)
一.FrameLayout(帧布局): 显示特点:所有的子控件默认显示在FrameLayout的左上角,会重叠在一起显示. 常用属性: layout_gravity(设置给子控件,调整控件在容器内的重 ...
- 前端开发之基础知识-HTML(一)
1.1 html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网 ...
- 移动端click延迟和tap事件
一.click等事件在移动端的延迟 click事件在移动端和pc端均可以触发,但是在移动端有延迟现象. 1.背景 由于早期移动设备浏览网页时内容较小,为了增强用户体验,苹果公司专门为移动设备设计了双击 ...
- Python encode和decode
今天在写一个StringIO.write(int)示例时思维那么一发散就拐到了字符集的问题上,顺手搜索一发,除了极少数以外,绝大多数中文博客都解释的惨不忍睹,再鉴于被此问题在oracle的字符集体系中 ...
- 创建一个Windows服务程序与实现定时器效果
1.创建一个Windows服务程序 一. 新建Window服务项目 二. 添加安装程序 三. 配置服务属性 四. 编写定时器代码 publicpartialclassService1 ...