上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

css中的after的使用(修改和添加内容)

[复制链接]
  • TA的每日心情
    无聊
    2023-11-2 17:37
  • 签到天数: 275 天

    [LV.8]以坛为家I

    114

    主题

    453

    回帖

    974

    积分

    荣誉开发者

    积分
    974

    荣誉开发者油中2周年卓越贡献生态建设者油中3周年

    发表于 2022-12-18 19:47:46 | 显示全部楼层 | 阅读模式

    使用after设置内容很简单,如下就可以。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        #content::after {
          content: '你好世界';
        }
      </style>
    </head>
    <body>
      <div id="content"></div>
    </body>
    </html>

    获取id为content里面after里面的内容

    let a = document.getElementById("content")   // 先获取dom标签
    // css2中写的是:after css3中是::after  想用哪个都可以
    
    window.getComputedStyle(a,"::after" ).getPropertyValue("content") // 这样就可以拿到了

    // 上面说了获取下面看下修改

    // 封装了一下,直接用就好了
    var css=function(t,s){
        s=document.createElement('style');
        s.innerText=t;
        document.body.appendChild(s);
    };
    // 相当于进行了重写
    css('#content:after{content:\"我爱你\"}')

    多知道了一种js设置css样式的方式

    let a = document.getElementById("content")   // 先获取dom标签
    a.style.setProperty('color','red')

    这个博客讲的是给标签设置一个属性然后css样式做标识去修改:https://www.jianshu.com/p/0d1f0d482e81

    我上面的写法是看的这个(因为是脚本操作网站我肯定不会给标签再设置属性,不知道重新网站能不能获取到,等测试了再说结果):https://www.cnblogs.com/yunkou/p/4269974.html

    引用jquery的写法:https://blog.csdn.net/qq_34205305/article/details/106113711

    接脚本定制
    I frequently record, because want to leave something.
  • TA的每日心情

    2023-10-19 09:35
  • 签到天数: 66 天

    [LV.6]常住居民II

    6

    主题

    126

    回帖

    219

    积分

    高级工程师

    积分
    219

    油中2周年生态建设者

    发表于 2022-12-19 10:49:42 | 显示全部楼层
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表