使用JavaScript修改CSS选择器:之后
Modify CSS selector :after with JavaScript
如何通过JavaScript访问或修改元素的CSS的伪选择器,如:在之后和(请不要使用jQuery)。
示例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Progress bar example</title>
<style type="text/css">
.progressbar
{
position: relative;
width: 100px;
height: 10px;
background-color: red;
}
.progressbar:after
{
content: "";
position: absolute;
width: 25%;
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div id="progressbar" class="progressbar" onclick="this.style.width='90%';"></div>
</body>
</html>
就像你看到的那样,我想使用进度条之类的东西,所以我不能简单地交换/添加/删除元素的第二个类。我想直接通过JS访问progressbar:after(使用:after选择器)类的width属性。但是怎么做呢?
您可以尝试一下:
已编辑
//create new style element
var style = document.createElement("style");
//append the style
document.head.appendChild(style);
//take the stylesheet object
sheet = style.sheet
//add the rule to your stylesheet -- changed this line to .insertRule
sheet.insertRule('.progressbar::after { width: 50% }', 0);
更新的fiddle
相关文章:
- replaceWith()之后的日期选择器
- jQuery在.find()之后使用选择器
- jQuery UI 日期选择器 - 禁用公共假期、周末、第二天上午 10 点之后,只允许周二、周三和周四作为可选日期
- jQuery选择器,用于查找与选择器匹配的给定元素之后的第一个元素
- JQuery 插件可以在 JQuery 方法链上调用,还是需要在选择器之后直接调用
- 使用日期时间选择器 UI 选择在日期时间之后使用什么方法触发事件
- 选择当前选择器之后的下一个类
- jQuery选择器是否适用于出现在Javascript代码之后的选择器
- 使用JavaScript修改CSS选择器:之后
- $.post之后jQuery日期选择器不工作
- AngularJS uib日期选择器没有'在uib选项卡中,不要在第一次打开/关闭事件之后显示日历
- iOS8 Safari在pushState之后:nth-child()选择器不起作用
- 在每一步/单击之后更新引导程序日期时间选择器
- 在.on()单击事件中append之后选择器不工作
- 如何编写一个选择器来查找第一个“输入”.在类为“x”的元素之后
- 日期选择器在每月9号之后不启用日期
- jQuery日期选择器在选定日期之后关闭日期选择器
- Jquery选择器,用于在一个元素之后的表单中所有带有class的元素
- jQuery日期选择器"在“更新”之后;事件或同等事件
- 如何使用选择器在元素之后插入一个新元素