通过js实现切换背景颜色

 <style>.box {width: 100px;height: 100px;border: 1px solid;transition: background-color 0.3s ease; /* 添加过渡效果 */}.box.active {background: deepskyblue;}
</style><div class="container"><div class="box"></div><button id="btn">切换</button>
</div><script>let btn = document.getElementById("btn");let box = document.querySelector('.box')let active = false<!--给按钮添加事件-->btn.addEventListener("click", () => {// 直接修改style样式box.style.background = active ? "transparent" : "yellow"// 通过添加class,控制显示if (!active) {box.classList.add("active")} else {box.classList.remove("active")}// 通过设置className 控制样式if (!active) {box.className = 'box active';} else {box.className = 'box';}// 通过setAttribute，设置元素属性if (!active) {box.setAttribute("class", "box active");} else {box.setAttribute("class", "box");}active = !active // 状态取反// 如果元素已经包含了指定的类，则会移除该类；如果元素没有包含指定的类，则会添加该类。box.classList.toggle('active');})// 鼠标的事件// click：鼠标单击事件，当鼠标在元素上单击时触发。// dblclick：鼠标双击事件，当鼠标在元素上双击时触发。// mousedown：鼠标按下事件，当鼠标在元素上按下任意按钮时触发。// mouseup：鼠标松开事件，当鼠标在元素上松开按钮时触发。// mousemove：鼠标移动事件，当鼠标在元素上移动时触发。// mouseover：鼠标移入事件，当鼠标移动到元素上方时触发。// mouseout：鼠标移出事件，当鼠标从元素上方移出时触发。// contextmenu：鼠标右键事件，当用户在元素上点击鼠标右键时触发。// wheel：鼠标滚轮事件，当用户使用鼠标滚轮时触发。// 可以通过 addEventListener 方法来为元素添加事件监听器// 鼠标移入，移出box.addEventListener("mouseover", () => {box.style.boxShadow = `0px 0px 4px 2px red`})box.addEventListener("mouseleave", () => {box.style.boxShadow = `none`})</script>

通过js实现切换背景颜色相关推荐

Android添加程序背景颜色,Android小程序实现切换背景颜色
本文实例为大家分享了Android实现切换背景颜色的具体代码,供大家参考,具体内容如下 (1)首先打开界面布局文件,添加两个Button xmlns:tools="http://schema ...
仿网易云MUI播放器，可播放暂停/切换背景颜色
唱片机的针 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf ...
使用Html+Css实现简易导航栏(导航栏遇到鼠标切换背景颜色)
Ⅰ.问题描述: 使用html+css实现简易导航栏: **要求:**将导航栏分成八个小部分,并在鼠标放上并不点击,导航栏背景颜色显示为黄绿色: Ⅱ实现过程如下: 1.运行软件VScode,亲测可实现: ...
JS网页更改背景颜色源代码
最基础版本 <!DOCTYPE html> <html><head> <meta charset="UTF-8"><title ...
MS中如何将晶格线隐藏、给元素自动标上名字、切换背景颜色
文章目录隐藏晶格线标名字换背景隐藏晶格线右击--Display style--Lattice--None(右上角) 标名字右击--Lable--Properties--ElementNam ...
php切换背景颜色,点击切换背景颜色
摘要: 点击点击点击 var btn1=document.getElementById('btn1'); btn1.οnclick=function(){ document.body.style. ...
JavaScript 清除图片背景颜色使之透明
主要JS /**清除图片背景颜色 **/ function removeImgBg(img) {//背景颜色白色const rgba = [255, 255, 255, 255];// 容差大小co ...
html指定区域的背景颜色,JS实现点击颜色块切换指定区域背景颜色的方法
本文实例讲述了JS实现点击颜色块切换指定区域背景颜色的方法..具体实现方法如下: 代码如下: JS实现点击颜色块切换指定区域的背景颜色适时切换网页指定区域背景颜色请选择背景: function g ...
Vue改变网页背景颜色切换
今天给大家分享一个好看的网页背景颜色切换的html文件功能支持: 1.点击默认主题内容区域切换对应颜色,包括文字背景和文字颜色 2.在动态颜色中可以选择自己喜欢的颜色动态切换实现代码: <! ...

通过js实现切换背景颜色

通过js实现切换背景颜色相关推荐

最新文章

热门文章