zoukankan      html  css  js  c++  java
  • 伪类常见用法及动态更改内容、样式的方法

      伪类after等常用来清除浮动、增加附加内容,利用伪类常会减少div容器的使用,使得我们的页面内容结构清晰。

      本文将会简介伪类的常见用法,并以jquery为例详述如何动态更改伪类内容(content)伪类样式

        一、常见用法

      1.1 清除浮动

      

     <div class="my-container">
            <div>内容1</div>
            <div class="sec" data-attr='前之啊是'>内容2</div>
            <div>内容3</div>
        </div>

      

    .my-container:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear:both;
            visibility: hidden;
        }

    .my-container>div {/*使得div容器在一行*/ width: 30%; margin-left:5px; background-color: pink; color: #fff; float: left; }

      1.2 增加附加内容

    .my-container>div:after {/*为元素增加后缀*/
            content: "后缀";
            color: yellow;
        }

     

      二、动态改样式

            /* 1. 新增样式表法*/
            $('<style>.sec::before{color:green}</style>').appendTo('body');
    
            /* 2. 更改class法*/
            $(".sec").removeClass('sec').addClass('sec_new');

      上述方法Ⅰ是新增样式表,该法支持动态新写入的样式,而后者则较适用已知样式只需更改类即可;

      

      三、动态改内容

      内容content支持直接写入css字符串,也可在css content中写入变量attr中,将值传入html便签中。

    css样式:

        .my-container>div:after {
            content: "后缀";
            color: yellow;
        }
    
    
        .sec:before {
            content: attr(data-attr);
            height: 24px;
            color: brown;
        }
    

     HTML: 

    <div class="my-container">
            <div>内容1</div>
            <div class="sec" data-attr='前之啊是'>内容2</div>
            <div>内容3</div>
        </div>
    

      

     动态修改:

    $(".sec_new").attr("data-attr",'修改后前缀');
    

     效果:

  • 相关阅读:
    EF框架 处理decimal字段 Sum() 遇到NULL时的特殊处理
    RSA加密解密及RSA签名和验证
    SQL 类似switch的东东用法
    js抛物线动画
    MyBatis的结果映射(resultMap)
    mybatis中#和$符号的区别
    MyBatis 中Mapper.xml中注意事项
    MyBatis sql映射器 Mapper
    MyBatis的自定义别名和内置别名
    MyBatis简单认识(入门)
  • 原文地址:https://www.cnblogs.com/giserjobs/p/11980013.html
Copyright © 2011-2022 走看看