js获取、修改伪元素

一、获取伪元素及其属性

• 伪元素：可以被浏览器渲染引擎识别并正确渲染，但伪元素本身并不是DOM元素， 所以无法被js直接操作
• window.getComputedStyle

      let body=document.querySelector('body')   //dom
      let logs=window.getComputedStyle(body,'::before')  //dom的伪元素
      // getPropertyValue('attr')  获取属性值
      let logs=window.getComputedStyle(body,'::before').getPropertyValue('width')
  

二、更改伪元素属性值 attr()

• Html标签

      div::after{
          content: attr(data-foo)
      }
      //修改
      <div data-foo='11111'></div>
  

• js修改

      let div=document.querySelector('div')
      div.setAttribute('data-foo','22222')
  

  • setAttribute（attr,value）
    • 如果指定的属性不存在，则向 DOM 元素添加新属性。
    • 如果指定的属性已经存在，则更新 DOM 元素的属性值。
• 允许连写

      div::after{
         content: '名字'attr(name)" "'年龄'attr(age)
     }
     let div=document.querySelector('div')
     div.setAttribute('name','张三')
     div.setAttribute('age','25')
  

  • 连写必须用空格隔开，不能用+号
  • content内容间隔用" "