为博客添加可切换的暗色和亮色主题 发布于 2018-05-19 13:42 更新于 2018-08-12...然而——绝大多数的技术类博客或技术文章都是亮色主题的，代码在其中以和谐但不太好看的亮色存在，或者扎眼但熟悉的暗色存在。这始终觉得不那么舒适。 于是，作为博主，我决定考虑添加亮色和暗色两种主题色的支持。...那么，我们只需要即时切换 body 的 dark-theme 的出现与否，就能让浏览器为我们使用全新的样式和颜色。 编写 css 第一个要改变的，当然是背景色了。...我增加了一个按钮，直接在 onclick 中编写切换 class 的代码： 切换黑白主题 (beta)" onclick="document.body.classList.toggle...于是完整的切换代码就像这样： 切换黑白主题 (beta)" onclick="(function(){ document.body.classList.toggle
第85节：Java中的JavaScript 复习一下css： 选择器的格式： 元素选择器：元素的名称{} 类选择器：....] 盒子模型： 内边距：盒子内的距离 边框：盒子的边框 外边距： 盒子和盒子之间的距离 轮播图 自动播放：每隔3秒切换，切换图片， // 点击弹框 // 确定事件，点击事件 // 通过事件定义函数...prompt(): 显示可提示用户输入的对话框 open(): 打开一个新的浏览器窗口 moveTo(): 把窗口的左上角移动到一个指定的坐标 moveBy(): 可相对窗口的当前坐标把它移动指定的像素...代码 表格全选和全不选 getElementById()方法 getElementById()方法返回带有指定ID的元素 var element = document.getElementById...：节点元素的子节点 attributes：节点的属性节点 getElementById(): 返回带有指定ID的元素 getElementsByTagName(): 返回包含带有指定标签名称的所有元素的节点列表
当 DOM 元素 获得焦点时 , 该 DOM 元素上绑定的 onfocus 事件被触发 ; 绑定该 onfocus 事件的元素 一般都是 input 表单元素 ; 如 : 当 用户 点击输入框 或 通过键盘切换到输入框时...function() { // 执行相关操作 }); 2、失去焦点事件 - onblur 事件 在 JavaScript 中 , 当 DOM 元素 失去焦点时 , 该 DOM 元素上绑定的 onblur...DOM 操作 , 给元素添加 onblur 属性 , 来指定当焦点集中在元素上时要执行的JavaScript代码 ; // 行内设置 : 使用 onblur 属性 <input type="text"...- 获取 / 设置 HTML 页面背景颜色 document.body.style.backgroundColor 属性 可 用于 设置 或 获取 HTML 页面 的背景颜色 ; 设置背景颜色示例 :...关灯状态 // 当前关灯状态 设置 0 , 背景黑色 , 按钮显示 " 开灯 " , 点击按钮 切换到 开灯状态 var flag = 0; button.onclick
常见的鼠标事件 ? 2. 操作元素 JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。...（注意：这些操作都是通过元素对象的属性实现的） 2.1. 改变元素内容（获取或设置） ?...的区别 获取内容时的区别： innerText会去除空格和换行，而innerHTML会保留空格和换行 设置内容时的区别： innerText不会识别html，而innerHTML会识别...获取属性的值 元素对象.属性名 设置属性的值 元素对象.属性名 = 值 表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。...的值， 如果是0就切换为文本框，flag 设置（赋值）为1,如 果是1就切换为密码框，flag设置为0 实现代码： <meta
两个不同类型的元素会产生出不同的树； 当根节点为不同类型时，react会直接销毁组件，并重新创建一个新的组件插入树中，且不会再递归它的子节点，一刀切，全部销毁。...Connecticut Duke Villanova 现在 React 知道只有带着 ‘2014’ key 的元素是新元素...，带着 ‘2015’ 以及 ‘2016’ key 的元素仅仅移动了。...先对比key再对比type，如何都相同则表示可复用，如果不相同则销毁重新创建。...组件的位置，这时候在切换visible为false时，各个组件的生命周期执行过程 Test1 初始化： render-挂载 visible改变：render-卸载-挂载 Test2 render-挂载
( 和 ) onclick 当用户点击某个对象时调用的事件句柄。 onmouseover 鼠标移到某元素之上。 onmouseout 鼠标从某元素移开。...onfocus 元素获取焦点时触发 onblur 元素失去焦点时触发 onchange 该事件在表单元素的内容改变时触发, , , 和 ...> onfocus 和 onblur onfocus 获取焦点的时候触发 onblur 当元素失去焦点的时候触发 使用示例 onfocus 获取焦点...和 onblur 失去焦点 用户名 <input......') } ele.onblur=function () { console.log('失去元素的焦点了...') }
事件绑定(onclick,onfocus,onblur) 常用绑定方式 方式一：通过 HTML标签中的事件属性进行绑定 在HTML标签中加入，onclick属性，并在后面加上需要的方法。...对于标签中没有绑定onclick的情况 通过getElementById获取id="btn然后，再在获取结果的后面，添加onclick属性...事件属性名 说明 onclick 鼠标单击事件 onblur 元素失去焦点 onfocus 元素获得焦点 onload 某个页面或图像被完成加载 onsubmit 当表单提交时触发该事件 onmouseover...鼠标被移到某元素之上 onmouseout 鼠标从某元素移开 小案例讲解 onfocus and onblur onfocus 获得焦点事件。...然后输入框的背景颜色变成粉色。 onblur 失去焦点事件。 当失去输入框的焦点的时候，输入框的背景颜色消失，然后里面文字变成大写。 演示代码 <!
1.面向对象版tab 栏切换 1.1功能需求 点击 tab栏,可以切换效果. 点击 + 号, 可以添加 tab 项和内容项. 点击 x 号, 可以删除当前的tab项和内容项....双击tab项文字或者内容项文字可以修改里面的文字内容 1.2案例准备 获取到标题元素 获取到内容元素 获取到删除的小按钮 x号 新建js文件,定义类,添加需要的属性方法(切换,删除...[i].onclick = this.toggleTab; 使用排他,实现只有一个元素的显示 toggleTab() { //将所有的标题与内容类样式全部移除 for (...x绑定点击事件 this.remove[i].onclick = this.removeTab; 获取到点击的删除按钮的所在的父元素的所有,删除对应的标题与内容 removeTab...(index); // 根据索引号删除对应的li 和section remove()方法可以直接删除指定的元素 that.lis[index].remove(); that.sections
深色模式开关 实现暗模式切换通常使用 JavaScript 来处理。现在，prefers-color-scheme 媒体查询和 CSS 自定义属性无需编写脚本即可实现无缝的暗模式体验。...可定制的表单控件 设置表单控件的样式以匹配特定的设计通常需要 JavaScript。随着 :focus-within 伪类和 CSS 自定义属性的出现，我们无需编写脚本即可实现此目的。...涵盖的主题： 无需 JavaScript 的响应式排版：探索 CSS 自定义属性和用于创建响应式和可扩展文本的clamp（）函数的世界。...交互式悬停转换变得简单：通过简单的转换属性和高级 CSS 伪元素来转换悬停效果，将 JavaScript 抛在后面。...每种技术不仅简化了复杂的任务，而且无需编写脚本即可增强用户体验。 从响应式排版和暗模式切换到图像延迟加载和无缝页面转换，这些技术展示了现代网络技术的灵活性和功能。
实现代码 简单有效，将整个窗口绑定onblur和onfocus。...全选复制放进笔记 window.onblur = function() { document.title = "(●—●)"; }; window.onfocus = function() { document.title...= "啦啦啦啦"; } 浏览器兼容性 目前主流的标准浏览器基本都已经支持，部门旧版浏览器需要增加内核前缀，IE从10开始支持。...常见应用场景 幻灯片播放时可在不可见时停止播放，恢复显示后继续播放 每隔一段时间向服务器请求数据的可在切换可见性时停止，减轻服务器负担 网站访问统计提供跟准确的数据 网站title根据可见性变换
1.功能需求 点击 tab栏,可以切换效果. 点击 + 号, 可以添加 tab 项和内容项. 点击 x 号, 可以删除当前的tab项和内容项....双击tab项文字或者内容项文字可以修改里面的文字内容 2.案例准备 获取到标题元素 获取到内容元素 获取到删除的小按钮 x号 新建js文件,定义类,添加需要的属性方法(切换,删除...].onclick = this.toggleTab; 使用排他,实现只有一个元素的显示 toggleTab() { //将所有的标题与内容类样式全部移除 for (var i...x绑定点击事件 this.remove[i].onclick = this.removeTab; 获取到点击的删除按钮的所在的父元素的所有,删除对应的标题与内容 removeTab(e)...1.点击+可以实现添加新的选项卡和内容 2.第一步:创建新的选项卡li和新的内容section 3.第二步: 把创建的两个元素追加到对应的父元素中. 4.以前的做法:动态创建元素createElement
1、功能需求 点击 tab栏,可以切换效果. 点击 + 号, 可以添加 tab 项和内容项. 点击 x 号, 可以删除当前的tab项和内容项....抽象对象: Tab对象 该对象具有切换功能 该对象具有添加功能 该对象具有删除功能 该对象具有修改功能 2、案例准备 获取到标题元素 获取到内容元素 获取到删除的小按钮...:创建新的选项卡li和新的内容section 第二步:把创建的两个元素追加到对应的父元素中....选项卡和当前的section x是没有索引号的,但是它的父亲li有索引号,这个索引号正是我们想要的索引号 所以核心思路是:点击x号可以删除这个索引号对应的Ii和section 为元素的删除按钮...x绑定点击事件 this.remove[i].onclick = this.removeTab; 获取到点击的删除按钮的所在的父元素的所有,删除对应的标题与内容 removeTab(e)
现需要编写程序，完成自动切换图片功能。 ?...confirm()显示带有一段消息以及确认按钮和取消按钮的确认框。 确认框： 确定返回true 取消返回falseprompt()显示可提示用户输入的提示框。...onblur 元素失去焦点onfocus 元素获得焦点onchange 用户改变域的内容onkeydown 某个键盘的键被按下onkeypress 某个键盘的键被按下或按住onkeyup 某个键盘的键被松开...鼠标点击某个对象ondblclick 鼠标双击某个对象onblur 元素失去焦点onfocus 元素获得焦点onchange 用户改变域的内容onkeydown 某个键盘的键被按下onkeypress...元素可包含属性、其他元素或文本。也就是说HTML标签可以包含属性，其他子标签或文本。
针对此种情况我们打算优化一下代码，针对前端的输入框，增加onblur函数，当鼠标移除情况下，设置searchTerm为空字符串并且不让下方的options展示,当鼠标移入或者输入内容情况下在展示下方的options...这个时候需要考虑的一点就是标准事件的执行顺序问题，标准事件中，我们常用的有 onclick / onblur，大家都知道onclick 是按钮按压以后执行，onblur是元素失去焦点以后执行。...相当于onclick 为 onmousedown -> onmouseup这两个操作以后作为onclick，onblur在onmousedown以后，但是在onmouseup以前，也就是说Onblur在...onclick操作以前，所以上述的demo中，下面的ul li的onclick事件无法调用到只能调用到input的onblur的事件，针对这种情况我们最终只需要将li的事件从onclick 修改成onmousedown...总结：篇中主要是通过优化共通方法来引出 onclick / onblur 的执行顺序问题以及提出如何解决此种问题的方案，知识点很简单，纯粹前端知识，篇中有错误地方欢迎指出，有不懂欢迎留言。
JavaScript 是用来控制网页行为的，它能使网页可交互；那么它可以做什么呢？...，可改善显示速度 因为浏览器在加载页面的时候会从上往下进行加载并解析。...//1,2,3 是存储在数组中的数据（元素） ==注意：Java中的数组静态初始化使用的是{}定义，而 JavaScript 中使用的是 [] 定义== 4.1.2 元素访问 访问数组中的元素和...元素 DOM相关概念： DOM 是 W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准。...下面就给大家列举一些比较常用的事件属性 事件属性名 说明 onclick 鼠标单击事件 onblur 元素失去焦点
JavaScript 是用来控制网页行为的，它能使网页可交互；那么它可以做什么呢？...（元素） 注意：Java中的数组静态初始化使用的是{}定义，而 JavaScript 中使用的是 [] 定义 4.1.2 元素访问 访问数组中的元素和 Java 语言的一样，格式如下： arr[索引]...元素 DOM相关概念： DOM 是 W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准。...="button" id="btn"> 下面 js 代码是获取了 id='btn' 的元素对象，然后将 onclick 作为该对象的属性，并且绑定匿名函数。...下面就给大家列举一些比较常用的事件属性 事件属性名 说明 onclick 鼠标单击事件 onblur 元素失去焦点 onfocus 元素获得焦点 onload 某个页面或图像被完成加载 onsubmit
如果用户点击确定按钮，则方法返回true 如果用户点击取消按钮，则方法返回false prompt() 显示可提示用户输入的对话框。...HTML DOM 标签体的设置和获取：innerHTML 使用html元素对象的属性 控制元素样式 使用元素的style属性来设置 如： //修改样式方式1 div1.style.border =...常见的事件 点击事件 onclick：单击事件 ondblclick：双击事件 焦点事件 onblur：失去焦点 onfocus:元素获得焦点。 加载事件 onload：一张页面或一幅图像完成加载。...如何绑定事件 直接在html标签上，指定事件的属性(操作)，属性值就是js代码 事件：onclick— 单击事件 通过js获取元素对象，指定事件属性，设置一个函数 代码： <img...规则： 如果灯是开的 on,切换图片为 off 如果灯是关的 off,切换图片为 on 使用标记flag来完成 / //1.获取图片对象 var
JS事件相关知识点整理 JS事件的驱动机制 常见JS事件 点击事件---onclick 焦点事件 获取焦点事件---onfocus 失去焦点事件----onblur 域内容改变事件---onchange...元素事件句柄绑定 优缺点 DOM绑定方式 示例演示 优缺点 ---- JS事件的驱动机制 ---- 常见JS事件 点击事件—onclick 点击事件，由鼠标或者热键点击元素组件时触发 代码演示...="callPolice()"/> ---- 域内容改变事件—onchange 域内容改变事件：元素组件的值发生改变时触发 代码演示: 元素事件句柄绑定 将事件以元素属性的方式写到标签内部，进而绑定对应函数 示例1:绑定一个函数或者对象 和java一样--> onclick="run2('大忽悠和小朋友')">
("id值")：通过元素的id获得元素对象 *操作Element对象： 1.设置属性值： 1.1明确获取的对象是哪一个， 1.2查看API文档，找其中有哪些属性可以设置...* 规则： * 如果开的on,切换为off * 如果灯是关的，off,切换图片为on * 使用标记flag来完成...： alert()显示带有一段消息和一个确认按钮的警告框 confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。...*HTML DOM 1.标签体的设置和获取:innerHTML 2.使用html元素的对象 3.控制元素样式 3.1.使用元素的style属性来设置 如： //修改元素的...*常见的事件： 1.点击事件： 1.onclick:单击事件 2.onblclick:双击事件 2.焦点事件 1.onblur:失去焦点
使用 React 状态管理控制组件可见性React 中的状态是指组件私有的数据，它决定了组件在呈现时的外观和行为。当状态更改时，组件会重新呈现，以反映这些变化。...useState 钩子返回一个数组，其中第一个元素是当前状态的值，第二个元素是更新该状态的函数。下面是一个示例，展示如何使用 useState 钩子创建一个用于控制组件可见性的状态。...然后，我们在组件的返回值中渲染一个按钮和一个条件渲染的 div 元素。当用户单击按钮时，onClick 事件处理函数会调用 setIsVisible 函数，并将 !...在上一节中，我们已经编写了一个简单的点击按钮来切换组件可见性的例子。接下来，我们将看看如何使用事件处理函数实现更高级的功能。显示/隐藏菜单我们可以使用事件处理函数来显示或隐藏菜单。...然后，我们编写了一个名为 handleClickOutside 的事件处理函数，它将检查用户单击的元素是否在菜单之外。如果用户单击的元素不在菜单中，则将可见性设置为 false，菜单将被隐藏。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
