首页 > 编程语言 >利用javascript获取并修改伪元素的值

利用javascript获取并修改伪元素的值

时间:2024-01-17 19:26:46浏览次数:27  
标签:style javascript 样式 insertRule innerHTML 获取 添加 元素 document

HEAD中添加style标签强制覆盖初始属性

这个方法是利用内部css样式的高优先级来覆盖外部css,好处是简单易理解,实现简单。坏处就是吃相太难看,过于粗暴。

var style=document.createElement('style');
style.innerHTML=".test::before{color:green}";//添加样式内容的话也可以用上面提到过的`insertRule`,相对例子里的硬编码会更优雅点。
document.head.appendChild(style);

看到这里可能有些人反应过来了,其实加style标签这种方法可以是insertRule实现方法的大前提——因为不是所有页面一开始都有内嵌的style样式的。这种方法虽然不是很好,但是有时候却又确确实实是必须的——比如“拖动滑块改变伪元素内文字大小”这个需求。

 

示例:

 

var style=document.createElement('style');
style.innerHTML=".antd-dataide-tabs-top-bar{margin-bottom:0 !important; background-color: yellow;}";//添加样式内容的话也可以用上面提到过的`insertRule`,相对例子里的硬编码会更优雅点。
document.head.appendChild(style);

 

标签:style,javascript,样式,insertRule,innerHTML,获取,添加,元素,document
From: https://www.cnblogs.com/ministep/p/17970830

相关文章

  • SQLserver获取本周、本月、本季、本年、第一天、最后一天
    注:本周第一天为周一、最后一天为周日(七)--本周第一天selectdateadd(WEEK,datediff(WEEK,0,getdate()),0);--本周最后一天selectdateadd(WEEK,datediff(WEEK,0,getdate()),6);--上周第一天selectdateadd(WEEK,datediff(WEEK,0,getdate())-1,0);--上周最后一天select......
  • linux下配置wifi自动获取ip地址
    wpa或者wpa2加密网的wifi操作步骤:1、配置WPA和WPA2加密的WiFi,主要使用wpa_supplicant工具,它被设计成一个运行在后台的守护进程。可以看成两个主要可执行工具:wpa_supplicant:后台运行,相当于服务端。wpa_cli:前端来进行搜索,设置和连接网络,相当于客户端。2、wpa_cli和wpa_supplicant......
  • 使用API接口获取拼多多商品详情
    随着电商行业的快速发展,越来越多的电商平台涌现出来,为消费者提供了丰富的商品选择。拼多多作为国内知名的电商平台之一,拥有庞大的商品库和优惠活动,吸引了大量的用户。本文将详细介绍如何通过调用API接口获取拼多多商品详情,帮助开发者快速实现拼多多商品信息的获取和展示。一、API接......
  • Python 面向对象的私有属性获取
    前言全局说明一、安装flask模块二、引用模块三、启动服务模块安装、引用模块、启动Web服务方法,参考下面链接文章:https://www.cnblogs.com/wutou/p/17963563四、面向对象的私有属性获取4.1.2classFoo:def__init__(self):self.name='wangwu'......
  • Java Collections.frequency()方法返回集合中指定元素个数
    JavaCollections.frequency()方法具有什么功能呢?下文笔者讲述Collections.frequency()方法的功能简介说明,如下所示:Collections.frequency()方法的功能:返回一个int值,其值给指定对象在集合中出现的次数Collections.frequency()方法的语法publicstaticintfreque......
  • 一、selenium环境安装+元素定位
    1、html元素构成1)元素的构成<标签名属性名=属性值属性名=属性值>文本内容</标签名>2)通用属性idnameclassstyle 3)如何去查找元素:根据元素本身的特征去找-筛选 2、元素定位selenium49大元素定位策略--传统8大定位策略+selenium4新增第......
  • Android12以上获取设备网络信号数据
    公司有很多物联网设备,关键的信号参数是RSRP,总有些地方信号差,不适合安装。所以让开发一款测信号的app,用于现场的同事在判定是否符合设备信号条件,再考虑安装设备。由于与开发过程中使用的是Androidsdk33,版本太高,网上搜到的很多旧的方法已经弃用,用起来也比较麻烦。自己捣鼓了半天......
  • Gin GET POST 以及获取GET POST传值
    GinGETPOST以及获取GETPOST传值1Get请求传值packagemainimport( "net/http" "github.com/gin-gonic/gin")funcmain(){ r:=gin.Default() //http://127.0.0.1:8000/query?username=111&age=10&sex= //{"age":"10&......
  • python 在排序数组中查找元素的第一个和最后一个位置 多种解法
    二分查找:基于二分查找的算法可以在O(logn)的时间复杂度内解决该问题。具体实现方式是,先使用二分查找找到该元素的位置,然后向左和向右扩展,直到找到第一个和最后一个位置。代码如下:defsearchRange(nums,target):defbinarySearch(nums,target,lower):left,righ......
  • Elementui中el-tree获取节点的选中、设置节点的选中
    this.$refs.tree.getCheckedNodes()//返回的是数组,包含所有选中的节点,不只是叶子节点。this.$refs.tree.setCheckedKeys(ids)//传递的是叶子节点的id合集例子:/***节点被点击时的回调*@paramdata-传递给data属性的数组中该节点所对应的对象*/nodeClick(data){c......