How to get a DOM element's ::before content with JavaScript?

https://stackoverflow.com/questions/44342065/how-to-get-a-dom-elements-before-content-with-javascript



getComputedStyle

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle


How to modify a DOM element's ::after style with JavaScript?

https://stackoverflow.com/questions/56590524/how-to-modify-a-dom-elements-after-style-with-javascript

demo

solution

very simple, just need add new class, and overwrite the old one


let textareas = [...document.querySelectorAll(`[data-uid^="circle"]`)];
let btn = document.querySelector(`[data-uid="btn"]`); btn.addEventListener(`click`, () => {
textareas.forEach((textarea, i) => {
textarea.setAttribute(`class`, `tips tips${i} rotate`);
});
}); // let center = 2;
textareas.forEach((textarea, i) => {
textarea.addEventListener(`click`, () => {
for (const item of textareas) {
item.classList.remove(`tips-highlight`);
}
textarea.classList.add(`tips-highlight`);
});
});
.tips::after {
content: "";
position: absolute;
left: 50%;
top: -19%;
height: 30px;
width: 30px;
background-color: #00c991;
border-radius: 50% 50% 0;
transform: translate(-50%, -50%) rotate(45deg);
} .tips-highlight::after {
background-color: #f82eb5;
}

refs

https://stackoverflow.com/a/14106897/5934465



https://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript

js


https://stackoverflow.com/questions/7330355/javascript-set-css-after-styles/7330454#7330454

js


jquery ???


$("#foo li:after").css("left","100px");

pseudoStyle lib

http://mcgivery.com/htmlelement-pseudostyle-settingmodifying-before-and-after-in-javascript/

var UID = {
_current: 0,
getNew: function(){
this._current++;
return this._current;
}
}; HTMLElement.prototype.pseudoStyle = function(element,prop,value){
var _this = this;
var _sheetId = "pseudoStyles";
var _head = document.head || document.getElementsByTagName('head')[0];
var _sheet = document.getElementById(_sheetId) || document.createElement('style');
_sheet.id = _sheetId;
var className = "pseudoStyle" + UID.getNew(); _this.className += " "+className; _sheet.innerHTML += " ."+className+":"+element+"{"+prop+":"+value+"}";
_head.appendChild(_sheet);
return this;
};

not exist


three = document.querySelector(`[data-uid="circle3"]`);
three.pseudoStyle("after", "color", "purple");

OK

refs



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


How to get a DOM element's ::before content with JavaScript?的更多相关文章

  1. 《转载》使用org.w3c.dom.Element的setTextContent()、getTextContent()方法时出现编译错误

    今天在更新项目后进行编译时,出现如下错误一堆: 编译错误 Google之,在stackoverflow上看到如下的解决方法: I came here with the same problem. Ev ...

  2. D3中数据与DOM element绑定之data() enter() exit()浅析

    几个非常有用的links: [1] three little circles. http://bost.ocks.org/mike/circles/ [2] How selection works.  ...

  3. HTML DOM Element

    HTML DOM Element(元素) 文档本身是文档节点 . 所有 HTML 元素是元素节点 . 所有 HTML 属性是属性节点 HTML 元素内的文本是文本节点 . 注释是注释节点 . NODE ...

  4. JQuery Object vs. DOM element

    JQuery Object 和 DOM的区别 HTML DOM 定义了访问和操作HTML文档的标准方法.其中 document 是DOM 树的根对象 ,在浏览器宿主环境中,可以通过JS操作HTML D ...

  5. ExtJS学习之路第二步:Ext.Component 和 Ext.dom.Element 的区别

    让我们来初步的探讨下Ext.Component和Ext.Element的区别. jQuery偏重于DOM元素的操作 1.每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的D ...

  6. highlight a DOM element on mouse over, like inspect does

    highlight a DOM element on mouse over, like inspect does highlight a DOM element on mouse over, like ...

  7. Is it possible to implement a Firebug-like “inspect element” DOM element highlighter with client-side JavaScript?

    Is it possible to implement a Firebug-like "inspect element" DOM element highlighter with ...

  8. How do I pull a native DOM element from a jQuery object? | jQuery Learning Center

    How do I pull a native DOM element from a jQuery object? | jQuery Learning Center How do I pull a na ...

  9. org.w3c.dom.Element 缺少 setTextContent 步骤

    org.w3c.dom.Element 缺少 setTextContent 方法 今天将项目环境由jdk5改为jdk6,eclipse重新编译工程后,却突然出现org.w3c.dom.Element没 ...

随机推荐

  1. 三路握手 三报文握手 TIME_WAIT three way handshake three message handshake

    UNIX网络编程卷1:套接字联网API(第3版) 第2章 传输层:TCP.UDP和SCTP 2.4 TCP TCP不能被描述成100%可靠的协议 数次重传失败,则放弃 数据的可靠递送和故障的可靠通知 ...

  2. B-tree R-tree B+-tree indexes 索引顺序存取方法 ISAM MySQL实现拓展ISAM为MyISAM

    High Performance MySQL, Third Edition by Baron Schwartz, Peter Zaitsev, and Vadim Tkachenko http://d ...

  3. 不占用额外内存空间能否做到 将图像旋转90度 N × N矩阵表示的图像,其中每个像素的大小为4字节

    给定一幅由N × N矩阵表示的图像,其中每个像素的大小为4字节,编写一种方法,将图像旋转90度. 不占用额外内存空间能否做到? 示例 1: 给定 matrix = [ [1,2,3], [4,5,6] ...

  4. SQLyog破解30天到期

    开始--运行中输入regedit.找到regedit.exe 文件   点击regedit.exe...就把注册表编辑器打开了   我们需要找到记录软件使用实现的数据...找到HKEY-CURRENT ...

  5. Axure RP 9版本最新版授权码和密钥 亲测可用

    分享Axure RP 9版本最新版授权码和密钥 亲测可用 声明:以下资源的获取来源为网络收集,仅供学习参考,不作商业用途,如有侵权请联系博主删除,谢谢! 自新的Axure RP 9.0 Beta版发布 ...

  6. python基础三---- time模块,函数的定义和调用

    此处重点说明一下: 注意: 1.用例之间不要存在依赖关系,每个用例都可以单独运行 2.用例不要互相调用,需要调用的公共方法可以写成方法去调用 1.等待 (在脚本运行的时候,有些线程之间需要间隔时间,可 ...

  7. 六:SpringBoot-引入JdbcTemplate,和多数据源配置

    SpringBoot-引入JdbcTemplate,和多数据源配置 1.JdbcTemplate对象 1.1 JdbcTemplate核心方法 2.SpringBoot中使用JDBCTemplate ...

  8. JavaWeb——Servlet开发

    什么是Servlet? Servlet运行的过程 Servlet的生命周期 生命周期的各个阶段 Servlet的配置 使用Web.xml配置 使用注解配置 Servlet相关接口 ServletCon ...

  9. Spark DataSource Option 参数

    Spark DataSource Option 参数 1.parquet 2.orc 3.csv 4.text 5.jdbc 6.libsvm 7.image 8.json 9.xml 9.1读选项 ...

  10. 输入DStream之基础数据源以及基于HDFS的实时wordcount程序

    输入DStream之基础数据源以及基于HDFS的实时wordcount程序 一.Java方式 二.Scala方式 基于HDFS文件的实时计算,其实就是,监控一个HDFS目录,只要其中有新文件出现,就实 ...