遇到一个场景 使用第三方UI库进行二次开发
设计师的UI稿子需要在已有的组件上在增加样式
组件却没有合适接口的接口来新增
这时候就可以用
before 来 新增样式
.range-handle:before {
content: ' ';
display: block;
height: 0.8rem;
width: 0.8rem;
background: @SecondaryColor;
border-radius: 50%;
}
setAttribute 和 content: attr() 来动态赋值
.range-handle:after {
content: attr(data-range);
display: block;
position: absolute;
transform: translate3D(0, -2.5rem, 0);
}
document.getElementsByClassName('range-handle')[0].setAttribute('data-range', this.range)
一般用来动态赋值的自定义属性 data-range 没有怎么办？
页面渲染之后给::before的dom元素附值
网友评论