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>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值