jq ‘’操作‘’伪元素

1. 伪元素非 dom 元素，jq无法操作，但可以间接影响。

2. 操作方式

2.1 修改类

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style type="text/css">.techbrood:before {content: 'no';color: red;}.techbrood.change:before {content: 'yes';}</style>
</head><body><div class="techbrood" id="td_pseudo">techbrood introduction</div><script type="text/javascript" src="jquery-1.9.1.min.js"></script><script>// $('#td_pseudo').addClass("change");</script></body></html>

2.2 改变增值属性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style type="text/css">p {color: deepskyblue;}p:before {content: attr(data-beforeContent);color: darkred;}</style>
</head><body><p data-beforeContent="测试">1111</p><script type="text/javascript" src="jquery-1.9.1.min.js"></script><script>$(function () {var times = 0;$('p').on('click', function () {switch (times) {case 0:$(this).attr('data-beforeContent', '你说啥都是对的');times++;break;case 1:$(this).attr('data-beforeContent', '你这么叼咋不上天呢');times++;break;case 2:$(this).attr('data-beforeContent', '那就上天吧');times++;break;default:times = 0;$(this).attr('data-beforeContent', '你说啥都是对的');times++;break;}});});</script></body></html>

转载于:https://www.cnblogs.com/justSmile2/p/10451713.html

jq ‘’操作‘’伪元素相关推荐

html 的css骚操作,意想不到的 CSS 伪元素 before/after 各种骚操作 - 文章教程
CSS 伪元素 before/after 我们经常用到,常见的就是画个三角形.绘画背景阴影等,这篇文章将给大家分享还有很多有趣的操作,比如画线画图标等. 画细线普通的 border 最小高度为1px ...
【JQ】jQuery改变css伪元素样式
伪元素是什么?例如 :bofore.:after 伪元素不是dom,不能直接操作. 若有以下html和css,通过操作伪元素改变图标颜色: <div class = "table-co ...
JS操作CSS伪元素
参考链接: segmentfault MDN CSSStyleSheet QQ群闲逛,看到有人说js不能操作css的伪元素样式, 之前没有遇到过应用场景,我当时想到的就是操作通过操作class来控制样 ...
Selenium 利用 JS/JQ 操作元素、鼠标键盘事件、Cookie 操作
今天是持续写作的第 26 / 100 天. 如果你有想要交流的想法.技术,欢迎在评论区留言. 本篇博客主要学习 Selenium 中如何利用 JavaScript 与 JQuery 操作页面元素,以及 ...
jq追加html属性,jQuery 操作 HTML 元素和属性的方法
jQuery拥有操作 HTML 元素和属性的强大方法. 1. 获取HTML 元素的内容和属性 (1) 获得内容: text().html() 以及 val()方法 My Test JQuery $( ...
CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...
CSS 伪类与伪元素
CSS的元素选择器除了根据id(#).class(.).属性([ ])选取元素以外,还有很重要的一类,就是根据元素的特殊状态来选取元素.它们就是伪类和伪元素.跟id选择器.类选择器.属性选择器以及派生 ...
伪类伪元素如何区分
前段时间在写网页的时候,使用了CSS的伪元素:after来实现样式,故而重温了一下伪类和伪元素.平时实现的时候便是拿出来用,但是真正区分两者的概念的时候却有点混淆了. 首先,查看一下W3S对伪类和伪元 ...
css伪类与伪元素区别
伪类伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰. 伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标 ...
css4个伪元素,CSS_CSS3中的content属性使用示例，CSS中主要的伪元素有四个：befo - phpStudy...
CSS3中的content属性使用示例 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个conte ...

jq ‘’操作‘’伪元素

jq ‘’操作‘’伪元素相关推荐

最新文章

热门文章