郴州市宜章网站建设,河北 保定 网站建设,做网站能带来什么,做外包网站1、style修改样式
基本语法#xff1a; 元素.style.样式’值‘
注意: 1.修改样式通过style属性引出 2.如果属性有-连接符#xff0c;需要转换为小驼峰命名法 3.赋值的时候#xff0c;需要的时候不要忘记加css单位 4.后面的值必须是字符串
div/div
// 1、…1、style修改样式
基本语法 元素.style.样式’值‘
注意: 1.修改样式通过style属性引出 2.如果属性有-连接符需要转换为小驼峰命名法 3.赋值的时候需要的时候不要忘记加css单位 4.后面的值必须是字符串
div/div
// 1、获取元素
const divdocument.querySelector(div);
// 2、通过style操作css
div.style.height300px;
div.style.width200px;
// 属性有-连接符需要转换为小驼峰命名法
div.style.backgroundColorrgba(249, 69, 69, 0.5);2、className通过修改类名改样式
className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名 他会覆盖之前的类名
style.nav{width: 300px;height: 300px;background-color: pink;border: 5px solid green;}.box{width: 200px;height: 200px;background-color: red;}
/style
div classnav/divscript// 1、获取元素let divdocument.querySelector(div);// 2、修改类名 不用加点因为是类名 自动加点// className会覆盖前面的类名需要写多个类名div.classNamenav box;/script3、通过classList控制css
为了解决className容易覆盖以前的类名我们可以通过classList方式 追加和删除类名 追加一个类 元素.classList.add(‘类名’) 删除一个类 元素.classList.remove(‘类名’) 切换一个类 元素.classList.toggle(‘类名’)
style.one {width: 200px;height: 200px;background-color: pink;}.two {border: 10px solid yellowgreen;}
/stylediv classone/div
scriptconst div document.querySelector(div);// 追加一个类div.classList.add(two);// 删除一个类div.classList.remove(two);// 切换一个类 有就删掉没有就加上// 此时类two已经被删除 div.classList.toggle(two);
/script4、trim()去除字符串两侧的空格
scriptconst str khfgdjh ;console.log(str);// khfgdjh console.log(str.trim());//khfgdjhconst a ;console.log(a.trim());
/script5、自定义属性
标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如: disabled、checked、selected
自定义属性: 在html5中推出来了专门的data-自定义属性 在标签上一律以data-开头 在DOM对象上一律以dataset.对象方式获取
div classbox data-id1 data-info这只是一个普通的盒子盒子/div
scriptconst boxdocument.querySelector(.box);// 输出自定义属性console.log(box.dataset.id);console.log(box.dataset.info);// 增加自定义属性box.dataset.namelxl;console.log(box.dataset.name);
/script6、定时器-间歇函数
目标:能够使用定时器函数重复执行代码 定时器函数可以开启和关闭定时器
1.开启定时器 setInterval(函数间隔时间) 这个函数可以是匿名函数 作用:每隔一段时间调用这个函数间隔时间单位是毫秒
注意: 1.函数名字不需要加括号 2.定时器返回的是一个id数字
setInterval(function () {document.write(我是半秒钟打印一次/br); },500)7、环境对象this
环境对象this是什么? 它代表着当前函数运行时所处的环境 this指向的粗略规则 谁调用this就指向谁
// 每个函数里面 都有this
function fn() {// 普通函数里面this指向的是windowconsole.log(this);console.log(typeof this);//object 是一个对象
}
window.fn()button点击/button
。。。。。。。。。
// 点击按钮
const btn document.querySelector(button);
// 下面的这个function也是回调函数
btn.addEventListener(click, function () {// this指向这个btn按钮// 谁调用this就指向谁console.log(this);//button点击/button// this就等于btn。在这个例子中btn.style.colorred;this.style.colorblue;
})8、回调函数
如果将函数 A 做为参数传递给函数 B 时我们称函数 A为回调函数
// 函数fn作为参数传递给setInterval
function fn() {console.log(我是回调函数);
};
setInterval(fn,1000);const btn document.querySelector(button);// 下面的这个function也是回调函数btn.addEventListener(click, function () {// this指向这个btn按钮// 谁调用this就指向谁console.log(this);//button点击/button
})
