javascript - 无法编辑 :before, 的 css 样式 :after?

标签 javascript jquery css

<分区>

我有这样的样式:

section.tipos .content > div:before {
    background: none repeat scroll 0 0 #DDDDDD;
    content: " ";
    height: 10px;
    left: 32%;
    position: absolute;
    top: -10px;
    width: 10px;
}

效果不错,

但是当某些事件发生时,我想将 left 属性更改为不同的 %

我知道这可以(肯定地)使用类名或样式来实现。但是我的老板不太喜欢类名,除非它们是 100% 需要的。

问题是: 我可以从 javascript 更改伪选择器的 css 吗?像这样的东西(但行得通)

$('section.tipos .content > div:before').css({ 'left' : 50+index*17});

最佳答案

不,你不能那样做。 :before:after 伪元素对您的 Javascript 代码不可用。

最好的解决方法是使用 Javascript 更改主要元素的类,并为 :before 伪元素提供单独的 CSS 代码,具体取决于它是哪个类有。

然后你可以有这样的 CSS 代码:

section.tipos .content > div.newClass:before {
    ....
}

但是,我注意到您想要将宽度设置为计算值;使用上述技术可能会很棘手。 CSS calc()可能会有所帮助,具体取决于 index 的用途,以及您需要的浏览器支持级别。

关于javascript - 无法编辑 :before, 的 css 样式 :after?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17108475/

上一篇:CSS:在不弄乱比例的情况下显示/缩放图像?

下一篇:HTML5+CSS3+JS框架?

相关文章:

javascript - 在页面加载时将焦点设置在 HTML 输入框上

javascript - 如何在 CSS 或 jQuery 中持续更改按钮的颜色

javascript - 在网页上嵌入 PDF 并水平滚动使其居中

javascript - youTube Analytics API 中多个过滤器的正确 JavaScript 语法是什么?

javascript - 我需要将多个输入加在一起,这些输入是 2 个其他输入的只读总计

javascript - 直接从 url 地址栏调用 javascript 函数?

jquery - 优化圆形动画

html - SVG 动画在悬停时重置

html - 在移动 View 中调整搜索栏宽度

jQuery addClass ('error' ) 到 "jQuery Validation Plugin v1.12"内的表单字段