做网站用什么插件,网站需要服务器吗,好用的h5网站模板下载,精品课程云网站建设这里写目录标题 一级目录二级目录三级目录 Web APIs01四、操作元素属性1.操作元素常用属性2.操作元素样式属性通过style属性操作css1.修改样式通过style属性引出2.如果属性有-连接符#xff0c;需要转换为小驼峰命名法3.赋值的时候#xff0c;需要的时候不要忘记加css单位 通… 这里写目录标题 一级目录二级目录三级目录 Web APIs01四、操作元素属性1.操作元素常用属性2.操作元素样式属性通过style属性操作css1.修改样式通过style属性引出2.如果属性有-连接符需要转换为小驼峰命名法3.赋值的时候需要的时候不要忘记加css单位 通过className操作css通过classList操作css 3.操作表单元素属性4.自定义属性 五、定时器-间歇函数打开定时器关闭定时器 用户倒计时效果案例案例要求大致思路完整代码 一级目录
二级目录
三级目录
Web APIs01
四、操作元素属性
1.操作元素常用属性
对象.属性值
2.操作元素样式属性
通过style属性操作css
对象.style.样式属性值 //获取元素 const box document.querySelector(‘.box’) //修改元素样式
1.修改样式通过style属性引出
box.style.width 200px box.style.marginTop 15px
2.如果属性有-连接符需要转换为小驼峰命名法
box.style.backgroundColor ‘pink’
3.赋值的时候需要的时候不要忘记加css单位
通过className操作css
元素.className‘类名(不加点)’ 注意 由于class是关键字所以使用className去代替 className是使用新值换旧值实现覆盖如果需要添加一个类需要保留之前的类名
通过classList操作css
使用className容易覆盖以前的类名可以使用classList方式追加和删除类名 //追加一个类 元素.classList.add(‘类名’)类名不加点且是字符串 //删除一个类 元素.classList.remove(‘类名’) //切换一个类(有就删没有就加) 元素.classList.toggle(‘类名’)
3.操作表单元素属性
获取DOM对象.属性名 设置DOM对象.属性名新值 表单.value‘用户名’ 表单.type‘password’ 注意获取表单内容只能用表单.value,但button特殊使用button.innerHTML,因为button的已经是标签内的内容innerHTML获取的是双标签内的提示内容
表单属性中添加就有效果移除就没有效果一律使用布尔值表示如果为true代表添加了该属性如果是false代表移除了该属性 比如disabled禁用、checked勾选、selected
button disabled/button
const buttondocument.querySeletor(button)
button.disabledfalse//表示不能禁用4.自定义属性
自定义属性 在html5中推出来了专门的data-自定义属性 在标签上一律以data-开头 在DOM对象上一律以dataset对象方式获取
bodydiv classbox,data-id10,data-smp21盒子/div
scriptconst box document.querySelector(.box)console.log(box.dataset.id)console.log(box.dataset.smp)
/script
/body五、定时器-间歇函数
单位为毫秒返回的是一个id数字函数名不需要加括号
打开定时器 setInterval (function(){ console.log(‘一秒执行一次’) },1000)1000毫秒即为1秒数字越小表示跳转间隔越小跳转越快 2. function fn() { console.log(‘一秒执行一次’) } setInterval(fn,1000)这里调用函数不要加(),fn()表示立即调用函数但在定时器里是主动调用
关闭定时器 let timer setInterval(function(){ console.log(‘hi~~’) },1000) clearInterval(timer) 2. let 变量名 seyInterval(函数间隔函数) clearInterval(变量名)
用户倒计时效果案例
案例要求
文本框里放用户协议倒计时结束前不能点击同意
大致思路
设置一个含有倒计时的按钮获取按钮对象利用定时器函数不断修改倒计时内容当倒计时数字为0时关闭定时器将禁用取消文字改为同意
完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodytextarea name id col30 rows10用户注册协议xxx是哈哈怪看完才能点确认/textareabrbutton classbtn disabled确认(8)/buttonscriptlet i8const btndocument.querySelector(.btn)let nsetInterval(function(){i--btn.innerHTML确认${i}if(i0){clearInterval(n)btn.disabledfalsebtn.innerHTML同意}},1000)/script
/body
/html
