js怎么动态控制伪元素（更改样式、隐藏等）

js控制伪元素

1.通过attr()改变伪元素的值
2.覆盖原有样式
- （1）css优先级覆盖
- （2）更改class类名覆盖
- （3）内联样式表覆盖

大家应该知道js是不能直接控制伪元素的，所以总结了俩方法。下面是未改变前的代码和实现效果。

<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;}.box:before{content: '阿花';color: red;font-size: 24px;}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

1.通过attr()改变伪元素的值

伪元素通过attr()来获取标签自定义属性的值。这个方法的缺点就是只能改变伪元素的值，而不能改变伪元素的属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="style.css"><style>.box{width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;}.box:before{content: attr(dataBefore);color: red;font-size: 24px;}</style>
</head>
<body>
<div class="box" dataBefore="阿花"></div>
<script>
var box=document.querySelector('.box');
box.setAttribute('dataBefore','谢谢你');//第二个值为‘’就是伪元素隐藏效果
</script>
</body>
</html>

2.覆盖原有样式

这个方法能更改伪元素的值和样式，缺点就是会造成部分css多余代码，设置content:’ ’ 就可以实现伪元素隐藏效果，当然你也可以设置opacity=0或者display=none都行，看需求

（1）css优先级覆盖

为父元素添加一个新的class类名。后面类名的优先级会高于前面的，将前面的样式覆盖

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;}.box:before{content: '阿花';color: red;font-size: 24px;}.skate:before{/*提前写在css样式表里，js添加完skate类名后便会覆盖前面box的样式*/content: '谢谢你';color: blue;font-size: 24px;}</style>
</head>
<body>
<div class="box"></div>
<script>var box=document.querySelector('.box');box.classList.add('skate');//添加classname  skate
</script>
</body>
</html>

（2）更改class类名覆盖

在css中写好新类名的样式，通过js修改类名，之前的样式就会失效（可以看一下和上一个方法其实没什么太大区别）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;}.box:before{content: '阿花';color: red;font-size: 24px;}.skate{width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;}.skate:before{content: '谢谢你';color: blue;font-size: 24px;}</style>
</head>
<body>
<div class="box"></div>
<script>var box=document.querySelector('.box');box.className='skate';//更改classname为skate
</script>
</body>
</html>

（3）内联样式表覆盖

这个适用的前提是你的css写在了外部样式表中，用js动态添加一个内联样式，内联样式优先级大于外部样式，外部样式就会失效；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box"></div>
<script>var style=document.createElement('style');//创建一个<style>标签var change=document.createTextNode('.box:before{content:"谢谢你";color:blue;}')//更改后伪元素的样式style.appendChild(change);//把样式添加到style标签里document.body.appendChild(style);//把内联样式表添加到html中
</script>
</body>
</html>

js执行的结果就相当于在head头部前面添加了一个style的内联样式表

js怎么动态控制伪元素（更改样式、隐藏等）相关推荐

html中伪元素怎么更改图片,如何改变css伪元素的样式
本篇文章介绍了如何改变css伪元素样式的方法,希望对学习前端css的朋友有帮助! 一.CSS伪元素 CSS 伪元素用于向某些选择器设置特殊效果. 伪元素的用法如下:selector:pseudo-el ...
如何修改css伪元素的样式
首先说一下变成思想,众所周知,css伪元素是不可以修改的,首先你查找他的元素就很困难,不知道怎么查找的可以看一下我的另一篇原生js查看css伪元素属性,那么我们应该怎么修改呢 . 其实换一种思维事情就 ...
JS DOM获取标签/元素style样式
JS DOM获取标签/元素style样式文章目录 JS DOM获取标签/元素style样式 .style getComputedStyle() .style 只能获取行内样式,不能获取style标签 ...
学习整理fabric.js更换画布文字元素字体样式
学习整理fabric.js更换画布文字元素字体样式原图效果图实现代码 index.html script.js 生成本地图原图效果图实现代码 index.html <!DOCTYPE ...
JS操作CSS伪元素
参考链接: segmentfault MDN CSSStyleSheet QQ群闲逛,看到有人说js不能操作css的伪元素样式, 之前没有遇到过应用场景,我当时想到的就是操作通过操作class来控制样 ...
[JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
html改元素怎么保存,是否可以在NW.js中保存html元素更改？
我正在开发一个简单的应用程序,允许用户上传图像和视频,同时这样做会自动为上传并包装的每个内容生成 .每个上传的图片都保留在前一个特别风格化的图片旁边. 我想要的是每次上传后(图片或视频),即使我关闭我 ...
js修改伪元素的属性、styleSheets获取样式表，Failed to read the 'cssRules' property from 'CSSStyleSheet' Cannot acces
登录验证中的判断逻辑 1.提示输入用户,输入8 - 16位密码2.检验输入用户名和密码是否正确用户名不允许空格,任何字符数字都行,不允许为空密码8-16位,不允许空格 ,小于8位给出提示密码必须 ...
如何用js改变伪元素样式
通常设置伪元素的样式直接用CSS很方便 .test:after{content:'';display:block;width:100%;height:100%;background:red; } 可是 ...