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

230 阅读1分钟

使用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样式做标识去修改:www.jianshu.com/p/0d1f0d482…

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

引用jquery的写法:blog.csdn.net/qq_34205305…