开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

通过JS更新变量值后，CSS伪类消失

当通过JS更新变量值后，CSS伪类消失，这通常是由于CSS伪类的样式是根据元素的状态来确定的，而JS更新变量值后，可能改变了元素的状态，导致CSS伪类不再适用。

要解决这个问题，可以考虑以下几个方案：

使用JavaScript操作CSS样式：可以通过JavaScript直接操作元素的样式，而不是依赖CSS伪类。可以使用元素的style属性来修改样式，或者使用classList来添加或移除类名。
使用CSS类名切换：可以在CSS中定义多个类名，分别对应不同的状态样式，然后通过JavaScript来切换元素的类名，从而改变元素的状态。
使用CSS变量：可以在CSS中定义变量，并在需要的地方使用这些变量。通过JavaScript更新CSS变量的值，可以实现动态改变样式的效果。
使用事件监听器：可以在JS更新变量值的同时，触发一个自定义事件，然后在CSS中使用该事件来定义相应的样式。

综上所述，通过以上方法可以解决通过JS更新变量值后CSS伪类消失的问题。具体选择哪种方法取决于具体的需求和场景。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
腾讯云云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
腾讯云云安全中心（SSC）：https://cloud.tencent.com/product/ssc
腾讯云云直播（CSS）：https://cloud.tencent.com/product/css
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
腾讯云移动开发（MPS）：https://cloud.tencent.com/product/mps
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
腾讯云云游戏引擎（GSE）：https://cloud.tencent.com/product/gse

请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估和决策。

相关搜索:js css伪类 js 移除 css 伪类 js操作css伪类 js控制css伪类如何通过css模块在React中使用伪类？如何移除:通过react/ next js聚焦伪类？Vue.js数组在变异中更新后消失通过JS分析数组来更改css类如何通过z-index使用之前和之后的CSS伪类在react.js中使用内联样式的CSS伪类在类级别添加@REQUESTMAPPING注释后，无法加载CSS和JS文件什么是CSS伪类，当通过浏览器搜索找到元素时，它会改变元素的背景颜色？通过节点JS & express & jquery向任何API提交请求后，以HTML格式打印变量值通过使用CSS或JS的Javascript实现定时可见性后的淡入通过$refs设置值后，Vue.js为什么不能更新该值 Vue.js -在Vue中的数据库中更改值后，值不会更新或消失如何通过css- in -js情感中自动生成的类名来搜索代码？为什么每次添加或删除新类时，都会获取和呈现通过css自定义属性分配的伪元素中的背景图像？svg --不能通过css改变vue.js的样式，在dom中它使用element.style而不是类名

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Sass和Less（预处理器）「建议收藏」

大家好，我是架构君，一个会写代码吟诗的架构师。今天说一说Sass和Less（预处理器）「建议收藏」,希望能够帮助大家进步!!!

01

【Web技术】623- 简单好用的前端深色模式/主题化开发方案

深色模式（Dark Mode）在iOS13 引入该特性后各大应用和网站都开始支持了深色模式。在这之前，深色模式更常见于程序IDE开发界面和视频网站界面。前者通过降低屏幕亮度，使得使用人员长时间盯着屏幕眼睛没有那么疲惫；后者通过深色模式来降噪，从而突出主体内容部分。快速开发一个深色模式难吗？在支持css自定义属性（又称css变量，css variables）的现代浏览器里，可以说是相当的容易。甚至可以在运行时实时新增主题，摆脱传统css主题文件加载模式下的主题需要预编译内置不能随时修改的弊端。下面我们来看一下如何使用css自定义属性来完成深色模式和主题化的开发。

01

Chrome调试

5. 伪类选择器样式修改： 1. 在 Elements 中找到对应元素，右键选择 Force state，再选择伪类，如:hover,即可强制变样式，而伪类样式也可在 Styles 下进行修改

01

对CSS变量不熟悉，这5个事例可看看！

随着 Web应用程序变得越来越大，CSS变得越来越大，越来越冗长，而且混乱不堪。在良好的上下文中使用CSS变量，可为我们提供重用和轻松更改重复出现的CSS属性的机制。

01

less和sass的区别，你了解多少？

Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。

02

由浅入深定制Bootstrap开发自己网站的六种方法

对于Bootstrap这个CSS框架，很多程序员持鄙视的态度，就如鄙视jQuery一般。诚然，就算不用这个框架，而是纯手写，或者借助JS框架的模板，一样可以写出一套页面，至于页面的精良程度、是否可二次开发、是否主流浏览器全兼容、是否可复用、可扩展、那就看开发者的个人能力了——如果一些人拿着公司的高额薪水或者甲方的高额酬金，却干着一锤子的买卖，代码不可复用，不可扩展，不可二次开发，浏览器不全兼容，他只是非常快速的胡七八凑了一套页面，应付到上线，然后潇洒的鄙视一下Bootstrap，我只能对这种人说俩字：呵呵。

02

webpack进阶——理论篇

01

44关学习CSS与CSS3基础「二」

我有一段时间没有更新FCC前端教程了，这一周就继续写完CSS与CSS3基础的教程。最近工作和生活都比较繁忙所以文章更新也受到了一定的影响。不过技术文章写作再忙也不会放弃的。我会继续努力坚持着一周一篇文章的进度，继续为大家带来我学习到的知识。让我们一起继续终身学习吧！

03

Sass 基础(一)

css 是一些非常简单得语句的组合，既然简单的语句，就不可避免的有很多重复的，冗余的东西，而且没有传统编程语言变量，控制语句等高级特性，所以造成了css 编写低效，往往需要查找替换，大量复制来修改或者编写。Sass 是用弥补这些缺陷的，使开发更加的方便快捷，更加方便管理。　　1.Sass和SCSS的区别。　　　　文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名　　　　语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带

08

Chrome浏览器调试技巧大全！

注：本文测试、截图均为Edge浏览器（内核是Chromium），浏览器内核可了解《有哪些浏览器/内核？[1]》

01

初次接触CSS变量

本文的目的主要是展示CSS变量是如何工作的。随着Web应用程序变得越来越大，CSS变得越来越大，越来越多，而且很多时候都很乱，在良好的上下文中使用CSS变量，为您提供重用和轻松更改重复出现的CSS属性的机制。

04

sass语法基础

在Sass中，我们声明变量使用的是“$”（美元符号）开头。Sass的变量包括3部分：声明符、变量名、值。

05

CSS less 基础

在 Node.js 环境中使用 Less ： npm install -g less 在浏览器环境中使用 Less ： <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

00

谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。不断更新，不断更新，不断更新，重要的事情说三遍。谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少谈谈一些有趣的CSS题目

06

[javascript] 利用chrome的overrides实时调试线上js

chrome的开发者工具，在source选项卡下，可以看到js的源代码，有一个断点调试功能，就是在js的源代码行号那里点击一下，出现一个箭头，当再次刷新页面并且进行了相应操作时，就会停在断点的地方。我们可以查看相应的变量值，在右侧可以手动改变变量值，进行调试。

03

神奇的选择器 `:focus-within`

有个错误有必要每次讲到伪类都提一下，有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持下面这两种表示方式。

05

[译] 不容错过的CSS变量

[译] 不容错过的CSS变量 Bobi.ink 2019-07-06 原文链接: Don’t miss out on css variables 当我第一次听说CSS变量时，我是

01

Chrome 调试技巧简记

ctrl + shift + P 打开命令面板，搜索 screen 可进行各类截图，包括节点截图、区域截图和全屏截图

01

神奇的选择器 :focus-within

有个错误有必要每次讲到伪类都提一下，有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持下面这两种表示方式。

02

前端浏览器实时刷新工具

安装node.js nodejs下载地址 https://nodejs.org/en/download/ 下载你的操作系统对应的版本，我下载的是LTS版下载得到.msi安装文件，直接点击下一步下一步

04

Vue.js知识点整理

Vue.js是一个渐进式、基于MVVM设计模式的纯前端JavaScript框架。它可以与其他技术混用，适用于以数据操作为主的项目，无需依赖后端技术。下面是关于Vue.js的一些重要知识点整理：

01

前端主题切换方案详解

现在我们经常可以看到一些网站会有类似暗黑模式/白天模式的主题切换功能，效果也是十分炫酷，在平时的开发场景中也有越来越多这样的需求，这里大致罗列一些常见的主题切换方案并分析其优劣，大家可根据需求综合分析得出一套适用的方案。

03

Web前端主题切换的几种方案

本文将介绍 Web 前端主题切换的几种常用方案，示例代码基于 React 框架。废话少说，show you the code！

01

尤大在 Vue的生态进展中提到的 <style> 动态变量注入是啥？

在 Vue RFC 中有一个关于样式的提案 SFC style CSS variable injection，这个 RFC 为Vue开发者提供了一种使用组件的响应性数据作为CSS变量的方法。

02

Vue创建项目及基本语法一

本文档仅作为个人学习笔记、详细内容可以查看官网文档，官方文档有更详细的使用说明及案例

02

CSS进阶-CSS变量

随着前端技术的不断演进，CSS也迎来了许多新特性，其中CSS变量（Custom Properties）无疑是增强样式灵活性和维护性的一大利器。本文将深入浅出地解析CSS变量的核心概念、常见应用场景、易错点及其解决策略，并通过实战代码示例，帮助你更好地掌握这一强大功能。

01

Less 基础知识详解：深入了解 Less 如何编写样式

Less（Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言。，它扩展了CSS（层叠样式表）的功能并提供了更灵活、更强大的样式定义和管理机制。通过使用 Less，开发人员可以编写可维护、可重用的样式代码，并以简洁的语法实现复杂的样式效果。本文将介绍 Less 的基本概念和特性，以及如何使用它来简化 CSS 开发过程。想要学习更多的知识，可访问犀牛书的 Less 中文文档。

01

【前端开发】用网页开发者模式debug

你是否曾经在编写网页时遇到过一些难以捉摸的问题？或者想要深入理解网页背后的运行机制？今天，我们将一起探索网页开发者模式这一强大工具，并通过它进行有效的调试。

01

尤大在 Vue的生态进展中提到的 <style> 动态变量注入是啥？

在 Vue RFC 中有一个关于样式的提案 SFC style CSS variable injection，这个 RFC 为Vue开发者提供了一种使用组件的响应性数据作为CSS变量的方法。

01

Vue3.0入门 + Vant3.0移动端实践（三）使用Cordova打包Android App

接着上面两节，把做成的h5小应用打包成android的app放置在手机上看看效果。

02

Less

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端

01

CSS3变量var深入

这个重要的 CSS 新功能，所有主要浏览器已经都支持了。本文全面介绍如何使用它，你会发现原生 CSS 从此变得异常强大。

02

8102年，这些 CSS 特性还没用上？

CSS Grid 仿佛是在这一年持续爆炸，CSS 会议不提一提网格布局都不好意思（当然也有 CSS 更新太慢的原因）。和 Flexbox 的从 2009 年发布第一版草案到 2015 年终于进入 W3C lv1 候选经历相似，2011 年提出的 Grid 草案，到了 2017 年才得到主流浏览器的默认支持。（CSS 新特性的难兄难弟…）

04

给单元素艺术添加动画

原文：Animating Single Div Art 翻译：nzbin 导读：学习工具的最好的方法就是尝试新技术，本文通过“单元素艺术”介绍了 CSS 变量的使用以及给单元素添加动画的几种方法。通过学习作者编写的复杂的“单元素”示例，相信你对 CSS 变量以及 CSS 动画会有一个深刻的认识。如果你深入挖掘你的工具，你可以使用最基本的 HTML 做一些令人称奇的东西。我对 Lynn Fisher 以及其他人的“单元素艺术”（“Single Div Art”）印象深刻，所谓“单元素艺术”就是你可以使用一个

05

Hexo主题(EJS模板)自定义页面扩展

自从初次接触 Hexo 到现在已经有两年多的时间了，时间过得飞快啊，关于 Hexo 的优点不再赘述，关于个人站点的优点，有必要在强调一下，那就是极高的自由度，这也是这篇文章的基础。现在有时间刚好总结一下我对于 Hexo 做的一些自定义扩展，虽然之前可能在别的文章中或多或少的涉及了，但并没有统一整理过。

03

Java中的类与对象（基础篇七）

Java是一门面向对象的编程语言，面向对象是一种程序设计思想，我们都是在面向对象思想的指引下去设计、开发计算机程序。Java中有“万物皆对象”的说法，这里的对象泛指现实中一切事物，每个事物都具有有自己的属性和行为。

02

CSS 变量教程

今年三月，微软宣布 Edge 浏览器将支持 CSS 变量。这个重要的 CSS 新功能，所有主要浏览器已经都支持了。本文全面介绍如何使用它，你会发现原生 CSS 从此变得异常强大。一、变量的声明声

使用less\u002Fcss 动态的切换主题色实现换肤功能

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情 >>

06

JavaScript笔记(1)

编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程.

01

Salesforce LWC学习(四) 父子component交互 / component声明周期管理 / 事件处理

我们在上篇介绍了 @track / @api的区别。在父子 component中，针对api类型的变量，如果声明以后就只允许在parent修改，son component修改便会导致报错。

02

前端模块化开发--Node基础&&WebPack模块化开发

一、Node 开发 1、模块化开发定义统一的方法：function.js javascript exports.sum = function sum(a, b) { return a + b; } 导入方法：use.js javascript var fun = require('./function') console.log(fun.sum(1, 2)) 2、服务器 javascript //创建服务器 var http = require('http'); http.createServer

03

CSS特效，给你的惊喜

现在这种设计在移动端很常见，因为宽度是稀缺的。相信不少人设计项目中有实现过这种交互，而且，我敢保证是利用JS实现的。

03

7. 精读《请停止 css-in-js 的行为》

styled-components 利用 ES6 的 tagged template 语法创建 react 纯样式组件。消除了人肉在 dom 和 css 之间做映射和切换的痛苦，并且有大部分编辑器插件的大力支持（语法高亮等）。此外，styled-components 在 ReactNaive 中尤其适用。

05

Python-drf前戏38.1-前端Vue01

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

02

新知识get，vue3是如何实现在style中使用响应式变量？

vue2的时候想必大家有遇到需要在style模块中访问script模块中的响应式变量，为此我们不得不使用css变量去实现。现在vue3已经内置了这个功能啦，可以在style中使用v-bind指令绑定script模块中的响应式变量，这篇文章我们来讲讲vue是如何实现在style中使用script模块中的响应式变量。注：本文中使用的vue版本为3.4.19。

01

python第一课——关于python的一些概念

day01(上午)： 1.学习方法(建议)： 1).不要依赖于我的视频，绝对不要晚上将视频全部在过一遍 2).上课不要记笔记，而且不要用纸质的笔记本去整理笔记 3).不要只看不敲，代码方面我们需要做到："敲、猛敲、使劲敲、往死里敲..." 4).纸上得来终觉浅，绝知此事要躬行 5).绝对不允许，上课睡觉、玩手机(吃鸡、王者荣耀...) 6).做好复习和预习(我只会给你们大纲，没有现成笔记)工作 7).保持初心，代码虐我千百遍，我视代码如初恋！！ 2.硬件和软件：硬件："看得见，摸的着"的计算机设备；例如：键盘、鼠标、显示器、显卡、内存条、CPU... 软件：有一些"数据"和"指令"组成的代码集群，构成软件 3.软件分类：两类： 1).系统软件：就是我们日常中所谓的操作系统；例如：windows(90%)、Unix、Linux(服务器)、mac(pc端)、ios(移动) 2).应用软件：例如：qq、360杀毒软件、暴风影音、计算器、画图板... 总结：硬件 --> 安装系统软件 --> 安装需要应用软件 --> 执行程序(应用软件) --> 看到效果 4.人机交互两种方式： 1).命令行的方式(早)：需要输入一些特殊的"指令"(英文单词)，让计算机帮助我实现一些需求 2).图形化界面的方式：只需要鼠标操作就可以让机器知道我要干嘛，老少皆宜；比较：上述的两种方式：图形化界面的方式完胜命令行的方式，命令行的方式学习成本比较高，需要我们对于一些特殊指令都能记住；而图形化界面的方式，只需要操作鼠标，点点点，就搞定；适合所有人群学习、生活、工作、娱乐... 5.如何启动dos窗口(控制台)？快捷方式：按wins键 + R键 --> 输入cmd --> enter(回车)启动dos窗口 6.常用的dos命令：切换盘符：d:、e:... dir：显示当前路径下的子目录(只有直接子目录)和文件 help：显示所有的dos指令的中英文对照 cd：显示当前路径或者将其更改 .和..：一个点(.)表示当前路径，两个点(..) 表示上一层路径 /和：表示"根"路径 ↑和↓：查询缓存 cls：清除屏幕 exit：退出控制台 start：开启一个新的dos窗口案例思考：如何使用命令行的方式启动qq？ bin: binary(二进制) 第一步：先打开dos窗口第二步：如果就是在当前的盘符下，就不用切换盘符的，否则，先切换盘符；使用cd qq所在的路径(..BIN)来切换路径第三部：输入qq.exe --> 看到效果(启动qq) 【注意】.exe后缀可以省略 7.计算机语言：分类：c、python、c++、c#、java、.net... 8.python语言：使用的领域(方向)： 1).web：大型电商平台、12306系统、金融类型的项目(银行、保险公司)。。。储备的知识点：前端：html、css、javascript(js)、jQuery、ajax(异步).. 后台：python基本、python框架(jg、flask)、数据库(mysqloracle) CRUD操作： create：增加 read：查询 update：修改 delete：删除 2).爬虫：使用技术去网站上抓取需要的数据会涉及到去除不需要的数据环节：正则表达式可以办到... 3).数据分析：涉及到算法、高数... 4).自动化运维： --------------------------------------------------------------------------------------------- day01(下午)： 1.python环境搭建： 1).安装python：我们安装的是python3.6.0版本，步骤如下： ①.双击3.6.0.exe文件，勾选add to path框(作用：将python路径配置到环境变量path中)，点击install now --> 读条 --> 显示successful(此successful不一定真的能成功)， ②.打开cmd --> 输入python --> 看到python的版本信息才真正的表示python环境安装成功 2).安装pycharm：我们安装的是python2017.2.4版本，步骤如下： ①.双击pytools.exe文件，一通下一步，勾选64bit&勾选.py勾选download... 读条，显示点击finish即可 ②.启动pycharm，选择do not import...，勾选server address，复制路径黏贴进去，点击active即可 ③.出现下拉框直接下一步，由于我们从未创建过任何的项目，所以选择c

01

将Web项目War包部署到Tomcat服务器基本步骤（完整版）

War包一般是在进行Web开发时，通常是一个网站Project下的所有源码的集合，里面包含前台HTML/CSS/JS的代码，也包含Java的代码。

03

求职 | 史上最全的web前端面试题汇总及答案2

作者｜樱桃小丸子儿原文｜http://www.jianshu.com/p/2f7eb1ad7174 很早之前就在看web前端面试题，一直想总结一个比较全面又详细的面试题库，现在总结了一些，分享给大家，以后还会持续更新，有些题目有多种答案，本文只给出其中一种，哪里有问题的欢迎指出。 Html&CSS 1、谈谈你对web标准的理解 web标准的理解 2、列举html中至少三个实体 &、、<、>、®、© 详细请看w3schoolHTML实体符号参考手册 w3schoolH

02

Java核心基础知识：面向对象的三大特性讲义

上述的每一个步骤, 我们都是参与者, 并且需要面对具体的每一个步骤和过程, 这就是面向过程最直接的体现.

00

接到“网站动态换主题”的需求，我是如何踩坑的

随着业务的发展，客户的需求也会变得更加多样化，产品后期就需要有自定义界面的能力，于是出现了“动态换主题”的需求。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭