通过js修改css伪类after,before等样式
2017-06-10 17:53
791 查看
<style> .box:before { content: ""; display: block; width: 190px; position: fixed; bottom: 0; top: 0; z-index: -1; background-color: #f2f2f2; border: 1px solid #ccc; border-width: 0 1px 0 0; } </style>
<div class="box"></div>
实现目的:例如要修改before伪类width为300px;
问题所在:由于伪类(after,before)不能通过js添加行间样式style,所以无法修改伪类样式。
解决方法:在元素上新增class,通过css优先级来实现
1、通过$(“.box”).addClass(“pox”);实现
<div class="box pox"></div>
2、在样式表加新增class样式.pox:before{width:300px !improtant;},通过css优先级实现before修改。
相关文章推荐
- 用js实现before和after伪类的样式修改的示例代码
- 借Vue-iview样式修改,熟悉:before和:after伪类的用法
- css中伪类 :before和:after
- [分享] 通过修改CSS自定义chrome滚动条样式
- css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?
- js修改:before、:after的内容
- CSS伪类(pseudo class)简明介绍之:before和:after
- CSS :before :after 伪类选择器
- css中伪类元素:before和:after
- JavaScript修改CSS伪元素:after和:before的样式
- CSS基础-03 伪类,伪元素,before和after使用案例
- CSS伪类(pseudo class)简明介绍之:before和:after
- 通过js获取css伪类的值
- [DIV/CSS] CSS 属性 :before && :after的用法,伪类和伪元素的区别
- 通过修改CSS自定义chrome滚动条样式
- css通过伪类来设置超链接样式附示例
- CSS伪类(pseudo class)简明介绍之:before和:after
- sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标
- css之伪类选择器:before :after(::before ::after)
- CSS伪类before,after制作左右横线中间文字效果