泰安建设网站,青海风控平台安卓版,物流网站建设相关的问题,济南网站优化多少钱4.1操作元素常用属性
●通过 JS 设置/修改 标签元素属性#xff0c;比如通过src更换图片 ●最常见的属性比如#xff1a;href、 title、 src 等 ●语法:
对象.属性 值【示例】
// 1.获取元素
const pic document.querySelector( img )
// 2.操作元素
pic.src ./images/b…4.1操作元素常用属性
●通过 JS 设置/修改 标签元素属性比如通过src更换图片 ●最常见的属性比如href、 title、 src 等 ●语法:
对象.属性 值【示例】
// 1.获取元素
const pic document.querySelector( img )
// 2.操作元素
pic.src ./images/b02.jpg
pic.title演唱会4.2操作元素样式属性
通过JS 设置/修改 标签元素的样式属性
1.通过style属性操作CSS ●语法
对象.style.样式属性 值适用于修改应是比较少的情况。而且它生成的是行内样式表权重较高。高于内部样式表 【示例】
const div document.querySelector(div)
div.style.height 50px
// 多组单词 采取小驼峰命名法
div.style.backgroundColor skyblue
div.style.borderBottom 2px solid pink练习-页面刷新页面随机更换背景图片 需求当我们刷新页面页面中的背景图片随机显示不同的图片 分析: ①随机函数 ②css页面背景图片background-image ③标签选择body因为body是唯一的标签可以直接写document.body.style 【示例代码】
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {background: url(imgs/h1.jpg) no-repeat top center/cover;}/style
/headbodyscriptfunction getRandom(m, n) {return Math.floor(Math.random() * (n - m 1)) m}const random getRandom(1, 3)document.body.style.backgroundImage url(imgs/h${random}.jpg)/script
/body/html2.操作类名(className)操作CSS ●如果修改的样式比较多直接通过style属性修改比较繁琐我们可以通过借助于css类名的形式 ●语法
// active 是一个css类名
元素.className active●注意 1由于class是关键字所以使用className去代替 2className是使用新值换旧值如果需要添加一个类需要保留之前的类名 3缺点多个类名操作麻烦
【示例】
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 200px;height: 200px;background-color: pink;}.box {width: 300px;height: 300px;background-color: skyblue;margin: 100px auto;border: 1px solid #000;}/style
/headbodydiv/divscript// 1.获取元素const div document.querySelector(div)// 2.添加类名div.className box/script
/body/html3.通过classList操作类控制CSS重要 ●为了解决className容易覆盖以前的类名我们可以通过classList方式追加和删除类名 ●语法
// 追加一个类
元素.classList.add(类名)
//删除一个类
元素.classList.remove(类名)
//切换一个类 //有这个类就删掉没有就加上
元素.classList.toggle(类名)【示例】
bodydiv classbox文字内容/divscriptconst box document.querySelector(.box)// 1.追加 类box.classList.add(active)// 2.删除 类box.classList.remove(box)// 3.切换 类 //有这个类就删掉没有就加上box.classList.toggle(active)/script
/body4.案例-轮播图随机版 需求当我们刷新页面页面中的轮播图会显示不同图片以及样式 模块: ①图片会随机变换 ②底部盒子背景颜色和文字内容会变换 ③小圆点随机一个高亮显示 【示例代码】
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title轮播图点击切换/titlestyle* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}/style
/headbodydiv classsliderdiv classslider-wrapperimg src./images/slider01.jpg alt //divdiv classslider-footerp对人类来说会不会太超前了/pul classslider-indicatorli/lili/lili/lili/li/uldiv classtogglebutton classprevlt;/buttonbutton classnextgt;/button/div/div/divscript// 1. 初始数据const sliderData [{ url: imgs/slider01.jpg, title: 对人类来说会不会太超前了, color: rgb(100, 67, 68) },{ url: imgs/slider02.jpg, title: 开启剑与雪的黑暗传说, color: rgb(43, 35, 26) },{ url: imgs/slider03.jpg, title: 真正的jo厨出现了, color: rgb(36, 31, 33) },{ url: imgs/slider04.jpg, title: 李玉刚让世界通过B站看到东方大国文化, color: rgb(139, 98, 66) },]//2.随机一个数const random parseInt(Math.random() * sliderData.length)//3.获取图片 修改图片路径 对象.urlconst img document.querySelector(.slider-wrapper img)img.src sliderData[random].url//4.获取p标签 修改标题const p document.querySelector(.slider-footer p)p.innerHTML sliderData[random].title//5.修改背景颜色const footer document.querySelector(.slider-footer)footer.style.backgroundColor sliderData[random].color//6.获取其中的一个 li 添加active类const li document.querySelector(.slider-indicator li:nth-child(${random 1}))li.classList.add(active)/script
/body/html4.3操作表单元素属性
●表单很多情况也需要修改属性比如点击眼睛可以看到密码本质是把表单类型转换为文本框 ●正常的有属性有取值的跟其他的标签属性没有任何区别 ➢获取DOM对象.属性名 ➢设置DOM对象.属性名新值
表单.value 用户名
表单.type password注意innerHTML得不到表单内容如input单标签除了button标签双标签
●表单属性中添加就有效果移除就没有效果一律使用布尔值表示。如果为true代表添加了该属性。如果是false 代表移除了该属性 ●比如disabled、checked、selected
【示例】
bodyinput typecheckboxbutton点击/buttonscriptconst ipt document.querySelector(input)// console.log(ipt.checked) //false 只接受布尔值ipt.checked trueconst btn document.querySelector(button)console.log(btn.disabled) //默认false 不禁用btn.disabled true //禁用/script
/body4.4自定义属性
●标准属性标签天生自带的属性比如class id title等可以直接使用点语法操作比如: disabled、checked、selected
●自定义属性: ➢在html5中 推出来了专门的data-自定义属性 ➢在标签上一律以data-开头 ➢在DOM对象上一律以dataset对象方式获取
●语法
bodydiv classbox data-id10盒子/divscriptconst box document.querySelector(.box)console.log(box.dataset.id)/script
/body【示例】
bodydiv data-id1 data-name盒子1/divdiv data-id22/divdiv data-id33/divscriptconst one document.querySelector(div)console.log(one.dataset.id) // 1console.log(one.dataset.name) // 盒子/script
/body
