网站开发手册下载,wordpress yum,网站运营seo,卡片式设计网站1.5.4 案例
1.5.4.1 需求说明
鲁迅说的好#xff0c;光说不练假把式,光练不说傻把式。所以接下来我们需要通过案例来加强对于上述DOM知识的掌握。需求如下3个#xff1a; 点亮灯泡 将所有的div标签的标签体内容后面加上#xff1a;very good 使所有的复选框呈现被选中的…1.5.4 案例
1.5.4.1 需求说明
鲁迅说的好光说不练假把式,光练不说傻把式。所以接下来我们需要通过案例来加强对于上述DOM知识的掌握。需求如下3个 点亮灯泡 将所有的div标签的标签体内容后面加上very good 使所有的复选框呈现被选中的状态
效果如下所示 1.5.4.2 资料准备
在JS目录下也就是用于存放html文件的同级创建img文件下然后将资料/图片素材中提供的2张图片拷贝到img文件夹中最终整体结果如下图所示 在VS Code中创建名为08. JS-对象-DOM-案例.html的文件然后准备如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-DOM-案例/title
/head
bodyimg idh1 srcimg/off.gif brbr
div classcls传智教育/div brdiv classcls黑马程序员/div br
input typecheckbox namehobby 电影input typecheckbox namehobby 旅游input typecheckbox namehobby 游戏
/body
script/script
/html
浏览器打开此时效果如图所示 1.5.4.3 需求1 需求 点亮灯泡 分析 此时我们需要把灯泡点亮其实就是换一张图片。那么我们需要切换图片就需要操作图片的src属性。要操作图片的src属性就需要先来获取img标签对象。 步骤 首先获取img标签对象 然后修改img标签对象的src属性值进行图片的切换 代码实现 //1. 点亮灯泡 : src 属性值
//首先获取img标签对象
var img document.getElementById(h1);
//然后修改img标签对象的src属性值进行图片的切换
img.src img/on.gif;
浏览器打开效果如图所示 1.5.4.4 需求2 需求 将所有的div标签的标签体内容后面加上very good 并且very good是红色字体 分析 我们需要在原有内容后面追加红色的very good.所以我们首先需要获取原有内容然后再进行内容的追加。但是如何保证very good是红色的呢所以我们可以通过之前html中学过的font标签和属性来完整。如何进行内容的替换呢之前我们学习过innerHTML属性。需要替换2个div的内容所以我们需要获取2个div并且遍历进行替换。 步骤 通过标签的名字div获取所有的div标签 遍历所有的div标签 获取div标签的原有内容然后追加font colorredvery good/font,并且替原内容 代码实现 //2. 将所有div标签的内容后面加上: very good (红色字体) -- font colorred/font
var divs document.getElementsByTagName(div);
for (let i 0; i divs.length; i) {const div divs[i];div.innerHTML font colorredvery good/font;
}
浏览器打开效果如图所示 1.5.4.5 需求3 需求 使所有的复选框呈现被选中的状态 分析 要让复选框处于选中状态那么什么属性或者方法可以使复选框选中可以查询资料得出checkbox标签对象的checked属性设置为true可以改变checkbox为选中状态。那么需要设置所有的checkbox那么我们需要获取所有的checkbox并且遍历 步骤 可以通过name属性值获取所有的checkbox标签 遍历所有的checkbox标签 设置每个checkbox标签的 代码实现 // //3. 使所有的复选框呈现选中状态
var ins document.getElementsByName(hobby);
for (let i 0; i ins.length; i) {
const check ins[i];
check.checked true;//选中
}
浏览器刷新效果如图所示: 1.5.4.6 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-DOM-案例/title
/head
bodyimg idh1 srcimg/off.gif brbr
div classcls传智教育/div brdiv classcls黑马程序员/div br
input typecheckbox namehobby 电影input typecheckbox namehobby 旅游input typecheckbox namehobby 游戏
/body
script//1. 点亮灯泡 : src 属性值var img document.getElementById(h1);img.src img/on.gif;
//2. 将所有div标签的内容后面加上: very good (红色字体) -- font colorred/fontvar divs document.getElementsByTagName(div);for (let i 0; i divs.length; i) {const div divs[i];div.innerHTML font colorredvery good/font; }
// //3. 使所有的复选框呈现选中状态var ins document.getElementsByName(hobby);for (let i 0; i ins.length; i) {const check ins[i];check.checked true;//选中}
/script
/html
