css -- js动态改变before和after

before和after也算是css里面最常见的元素了，而我却一直不太了解，再不学一下就真的太不像话了。所以学习一下，记记笔记。

1. before && after

伪元素，也可以解释为虚拟元素，就是为当前元素增加装饰效果，它们不会出现在dom树，它们显示的是'content'属性，默认为内联元素。

它们无法在document中被找到，无法设置点击等事件，但是可以捕获事件。

获取它们的方法是通过css的接口获取。需要用的时候再进行查阅。

before和after技术上是一样的，只是位置不一样，一前一后装饰元素。

2. 实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>before&after</title>
    <style>
        body{padding: 80px;
            background: #ccc
        }.box{border-radius: 121%;
            height: 433px;
            width: 500px;
            background-image:linear-gradient(0deg,#fff 16%, #0ae 17%,#0ae 33%, #fff 34%,#fff 66%,
                    #0ae 67%,#0ae 83%, #fff 84%);
            background-repeat:repeat;
            background-size:50px 50px, 50px 50px;

            background-position: 20% 20%, 45% 30%
        }.box:before, .box:after{content: "";
            position: absolute;
            width: 134px;
            height: 18%;
            box-shadow: 2px 2px 2px #b7b7b7;
            background: #63b1b1;
            transform: rotate(-3deg);
            left: 168px;
            top: 29%;
            border-radius: 50%;
        }.box:after{transform: rotate(3deg);
            left: 369px;
        }</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

效果图，画了一个木乃伊，本来想画蜘蛛侠的。。。

哪怕这是个很简单的图，也感受到了用css画图和做动画有点酷炫，以后可以常常练手。

2018-7-14更新

今天遇到了一个问题，有个元素是用js append到界面上，这个元素怎么给它加content呢，我在css里面写了一个

class:before这种，append元素后addClass也没作用，js无法操作before和after这类不存在在dom里面的元素。在网上找到一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,div,p,a{margin: 0;padding: 0;}body{background: #00AA88}div{/*外面框框的div样式*/
            width: 200px;
            position: relative;
            overflow: hidden;
            height: 150px;
        }a{ display: inline-block; }a:before,a:after{/*动态加载的元素*/
            content:"";
            display: inline-block;
            position: absolute;
            width: 70%;
            height:100%;
            transform: skewX(20deg);
            background: #fff;
            opacity: 0.3;
            transition: all .3s linear;
            top:0;
        }p{/*里面框的样式*/
            background: #003eff;
            display: inline-block;
            width: 200px;
            height: 150px;
        }</style>
</head>
<body>
<div id="d1" class="w">
    <a id="i" href="#" class="a1">
        <p></p>
    </a>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    var b=$("a:before");
    var a=$("#i");
    a.hover(function () {$('<style>a:before{left:-20%;} a:after{right:-20%;} </style>').appendTo('head')//这里写body也可以
    },function () {$('<style> a:before{  left:-100%; } a:after{  right:-100%;  } </style>').appendTo('head')//这里写body也可以
    })
</script>
</body>
</html>

确实实现了把before和after动态改变，只是会往head(或者body)里面一直添加<style>标签，这肯定是不符合实际项目使用的，另外，js代码里面，a.hover(fn, fn)是what？查了一下jquery API，不仅又深刻反省自己的水平：

刚刚试验了一下，append了元素然后addClass是可行的，之前不行，可能是公司的项目太复杂了把我整懵了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{background: #00AA88}.test:before{/*动态加载的元素*/
            content:"哈哈哈哈";
        }.test:after{content: "嘻嘻嘻嘻";
        }</style>
</head>
<body>
<button οnclick="addBefore()">点击我</button>

</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    function addBefore() {$('body').append('<div style="height: 100px;background-color: plum" id="aaa"></div>')$('#aaa').addClass('test');
    }
</script>
</body>
</html>

css -- js动态改变before和after相关推荐

vue 模拟随机变速的动态打字特效【支持多行文本】（含css实现闪烁光标，js动态改变setInterval定时器的时间间隔）
随机变速的动态打字特效–最终效果随机变速的动态打字特效–完整代码 <template><div class="contentBox"><span&g ...
如何通过js改变css样式,如何通过JS 动态改变CSS样式
如何通过JS 动态改变CSS样式0 豆豆dou...2013.09.15浏览640次分享举报 .TLIWREGION3CSS { position:absolute; left:32px; top:4 ...
js动态改变css样式
动态改变页面元素样式: 使用getElement系列方法访问元素. 改变样式属性:style属性:className属性. <!DOCTYPE html> <html>< ...
WEUI picker组件无法js动态改变选项
功能需求设备号和摄像头都可以下拉选择,但是具体的摄像头下拉选项是根据设备号而定的.如下图,尾号为352的设备号只有前置摄像头,尾号为657的设备号前置和后置摄像头都有. 问题说明一般情况下,这个需 ...
html动态资源加载进度,JavaScript_快速解决js动态改变dom元素属性后页面及时渲染的问题，今天实现一个进度条加载过程 - phpStudy...
快速解决js动态改变dom元素属性后页面及时渲染的问题今天实现一个进度条加载过程,dom结构其实就是两个div 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文 ...
解决js动态改变dom元素属性后页面及时渲染问题
解决js动态改变dom元素属性后页面及时渲染问题参考文章: (1)解决js动态改变dom元素属性后页面及时渲染问题 (2)https://www.cnblogs.com/fangsmile/p/49 ...
vue中设置html的fontsize,vue中rem布局使用js动态改变fontsize
rem布局原理:使用js动态改变html的字体大小+rem的特性,来保证最初的设计图中每个元素的尺寸比例不变,以适用于不同尺寸的设备能够正常显示. (function (doc, win) { var ...
使用js动态改变input的只读属性
使用js动态改变input的只读属性写一个网页需要动态改变input的只读属性,看了很多博客改了很多次代码但没报错也没实现功能.写个博客记录一下. 在input标签里设置只读属性, <inpu ...
Vue.js动态改变样式
动态改变样式我们经常有这样的需求,就是用js控制css.但是我们知道js只能控制DOM层和BOM层,没有办法控制写入CSS文件.可是我们有时候偏偏需要改变样式怎么办呢?我们有两种方法: 动态改变st ...

css -- js动态改变before和after

css -- js动态改变before和after相关推荐

最新文章

热门文章