首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js 动态修改_after_before伪元素content值

今天做了一个有关js如何绑定动态修改伪类的content的内容,运用到的有( :before 和 :after 伪元素、CSS content 属性、data-* H5新属性、js)等技术。...基本原理: 1)首先给box盒子添加 [data-content-before=":before"]和[ data-content-after=":after"]属性; 2)其次添加html标签和style...样式; 3)在样式里添加box元素的:before伪元素和:after 伪元素; 4):before伪元素和:after 伪元素里各自添加content属性; 5)content 和 attr...属性里的值:after(before同理) 6)最后通过js获取到box对象,通过box对象attributes找到添加的 [data-content-before=":before"]和[ data-content-after...background: #39c778; box-shadow: 1px 2px 3px -1px; display: block; } 三、js

11K20
您找到你想要的搜索结果了吗?
是的
没有找到

After Effects:After Effects下载After Effects表达式怎么用

目录: 第一部分:After Effects的电脑配置要求 第二部分:After Effects安装使用 第三部分:After Effects表达式怎么用 题外话:我猜你永远看不到,我有一颗柔软的心和一双会流泪的黑眼睛...id= 点击输入图片描述(最多30字) 第一部分:After Effects的电脑配置要求 After Effects是Adobe公司开发的一款专业视频特效和合成软件,主要用于电影、电视、广告等领域的特效制作和动画设计...至于安装条件,以下是Adobe After Effects 2021的最低系统要求: 操作系统:Windows 10或macOS v10.14(Mojave)及以上版本 处理器:64位多核处理器 内存:...第二部分:After Effects安装使用 1、下载软件包,解压,以管理员身份运行set-up.exe; 点击输入图片描述(最多30字) 2、设置语言和安装位置,点击继续,开始安装; 点击输入图片描述...第三部分:After Effects表达式怎么用 1.表达式是对于图层的各种变换应用的扩展表达,所以首先要建立基本的图层。 2.建立图层后,点击图层的下拉箭头。

82840

js如何动态选择和操作 CSS 伪元素,例如 ::before 和 ::after

什么是伪元素 伪元素用于向某些选择器设置特殊效果。 已存在元素是指DOM中存在的,伪元素则是虚拟的一种,样式也是给这个虚拟的元素使用的。...比如伪元素 :before和:after,用于在css渲染中向元素的头部或尾部插入内容,它们不受文档约束,也不影响文档本身,只影响最终样式。...它不存在于文档中,所以js无法直接操作它。而jQuery的选择器都是基于DOM元素的,因此也并不能直接操作伪元素。 哪些是伪元素 :first-letter:向文本的第一个字母添加特殊样式。 ...:after:在元素之后添加内容。  ::placeholder:匹配占位符的文本,只有元素设置了placeholder属性时,该伪元素才能生效。(只支持双冒号的形式)。....addClass('green'); 2、使用CSSStyleSheet的insertRule来为伪元素修改样式: // html代码 测试测试 //js

5.2K20

:before,:after伪元素妙用

伪元素特性(目前已经遇到的) 它不存在于文档中,所以js无法操作它 它属于主元素本身,有些伪类仅仅是代表元素内容的一部分,譬如:first-letter代表第一个字母;因此当伪元素被点击的时候触发的是主元素的...click事件 块级元素才能有:before, :after,譬如img就不能设置,亦即某些元素是没有:before, :after的,只要知道一般的块级元素都可以用就行了 注:css3中,为了与伪类区分...可以有两种动态方案: 用js动态修改主元素的属性值,这个很直观 修改伪元素content关联的属性 下面看一个例子: //html: //<a class="datepicker__link z-today...预先把每个单元用到的月份信息和星期信息放到主元素的data属性上面(缓存的思想),选中的时候一般都是要添加一个选中态样式,这时,除了基本的凸显性样式外,同时切换伪元素关联的data属性即可轻松地解决这个问题,而不用通过<em>js</em>...结合伪元素的特点,利用它们的灵活性,可以为我们提供更多的特性,下面总结一下目前想到的伪元素的优缺点: 优点/用途 减少dom节点数 让css帮助解决一部分<em>js</em>问题,让问题变得简单 缺点 不利于SEO 代码读起来

1K40

【CSS】CSS 选择器 ① ( CSS 选择器作用 | CSS 选择器分类 | 标签选择器 | 类选择器 | div 与 span 标签 | 多类名选择器 )

文章目录 一、CSS 选择器作用 二、CSS 选择器分类 三、标签选择器 1、简介 2、代码示例 四、类选择器 1、简介 2、类名规范 3、代码示例 4、div 与 span 标签 ① span...标签 ② div 标签 5、多类名选择器 一、CSS 选择器作用 ---- CSS 作用 : 以下面的代码为例 , 先通过 选择器 h3 将 HTML 中的 h3 标签类型选择出来 , 然后为这些标签设置...选择器分类 ---- CSS 选择器 主要分为 : 基础选择器 复合选择器 两种类型 ; CSS 基础选择器 主要分为以下几类 : 标签选择器选择器 id 选择器 通配符选择器 三、标签选择器 --...-- 1、简介 标签选择器 是 使用 HTML 标签作为选择器 , 如果 HTML 引入了使用 标签选择器的 CSS 样式 , 那么该 HTML 中的 所有的指定标签 , 都使用该 CSS 样式 ; 标签选择器...1、简介 CSS 类选择器 可以 将 页面中的 某几个 标签选择出来 , 使用 " .类名 " 识别标签 ; CSS 类选择器 使用方式如下 : 首先 , 在标签中的 class 属性中设置类名 ;

2.8K20

【CSS】CSS 复合选择器 ① ( 基础选择器与复合选择器 | 后代选择器 )

文章目录 一、基础选择器与复合选择器 二、后代选择器 1、语法说明 2、示例分析 3、完整代码示例 一、基础选择器与复合选择器 ---- CSS 基础选择器 : 在之前的博客中 , 介绍了 CSS...的基础选择器 ; 标签选择器选择器 ID 选择器 通配符选择器 在实际开发中 , 基础选择器 不能满足 快速选择标签的需求 ; 复合选择器 是 由 两个以上 的 基础选择器 通过 各种方式 组合 而成的...选择器 ; 复合选择器 可以 更精准 更快速 地 选择 目标元素标签 ; 二、后代选择器 ---- 1、语法说明 后代选择器 可用于 选择 基础选择器选择出的元素组 中的 另外基础选择器选择出的元素组...; 后代选择器 语法 : 父选择器 和 子选择器 都是 CSS 基础选择器 , 父选择器 和 子选择器 之间 使用空格分开 ; 父选择器选择器 { 属性名称1:属性值1; 属性名称2:属性值2...设置为 类选择器 .gradefather , 子选择器 也设置为 类选择器 .father2 , 孙子选择器 设置为 标签选择器 label , 那么将 label 标签内的文本设置为红色 , 则可以使用如下样式

1.9K10
领券