《Web前端基础》课件-任务7：学习DOM模型 元素属性操作_第1页
《Web前端基础》课件-任务7：学习DOM模型 元素属性操作_第2页
《Web前端基础》课件-任务7：学习DOM模型 元素属性操作_第3页
《Web前端基础》课件-任务7：学习DOM模型 元素属性操作_第4页
《Web前端基础》课件-任务7：学习DOM模型 元素属性操作_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

元素属性操作元素属性操作在一个功能完善的页面中，交互效果往往多种多样，仅通过操作元素的内容和样式并不能满足开发条件，我们还需要学习如何操作元素属性。在DOM中，我们可以操作property属性、attribute属性和data-*属性。例如，img元素、input元素常用的property属性如下。img元素：src、title属性。input元素：disabled、checked和selected属性。1操作property属性操作attribute属性的方式如下。设置属性：通过元素对象的setAttribute()方法可以设置属性。获取属性值：通过元素对象的getAttribute()方法可以获取属性值。移除属性：通过元素对象的removeAttribute()方法可以移除属性。2操作attribute属性element.setAttribute('属性','值');element.getAttribute('属性');element.removeAttribute('属性');Tab栏在网站中的使用非常普遍，它的优势在于可以在有限的空间内展示多块的内容，用户可以通过单击标签项在多个内容块之间进行切换。3【案例】Tab栏切换3【案例】Tab栏切换编写HTML页面Tab栏由上、下两部分结构组成，上半部分是Tab栏的标签结构，用于展示标签项；下半部分是Tab栏的内容区，用于展示内容项。每个标签项都有相对应的内容项，通过鼠标单击Tab栏的标签项可以实现对应内容项的切换。3【案例】Tab栏切换通过JavaScript实现Tab栏的切换效果首先需要获取目标元素，然后通过for语句为每个元素对象注册单击事件，最后实现Tab栏的切换效果。3【案例】Tab栏切换通过JavaScript实现内容区的展示效果内容区展示的内容随标签项的切换而切换，我们可以通过操作attribute属性来完成。4动手实践：显示和隐藏密码隐藏密码的效果图显示密码的效果图案例需求：使用两张不同状态的“眼睛”图片充当按钮功能。图片中“眼睛”睁开时密码显示，闭合时密码隐藏。默认情况下，输入的密码是隐藏的，对应闭合状态的“眼睛”。案例实现思路首先通过img和input等元素搭建密码结构，然后通过JavaScript操作元素的属性，通过更改input元素的ty

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论