前端笔记伪元素

一、伪元素是在标签之内添加内容，不是添加一个兄弟元素，css3中规定伪元素用两个冒号，伪类用一个冒号。获取伪元素内容的方法：getComputedStyle("p"，“:after”).content或者getComputedStyle("p"，“:after”).getPropertyValue("content")，两者的区别是getPropertyValue遇到带短横线的属性名时可以直接使用，而.content这种键值访问方式遇到比如background-color，必须使用驼峰命名backgroundColor来获取。伪元素默认是”display: inline”。其中content值可以是字符串、url(logo.png)方法传入多媒体文件图片/视频、arrt(类名)方法引用当前元素的属性的值。

修改伪元素的值：1、通过attr()改变伪元素的值，元素里面添加自定义属性data-before=“aaa”，伪元素的content通过attr(data-before)来设置内容，js通过element.setAttribute("data-before","bbb")来改变自定义属性的值，从而改变伪元素的值。

2、通过element.className="newName"的方式来更改类名，从而修改伪元素的内容和样式，都可修改。（再写一套伪元素样式）前提是通过类名设置的伪元素，通过标签设置的伪元素不行。或者通过element.classList.add("newClassName")的方法添加一个类名，通过优先级来覆盖之前的类名。如果样式、内容都要改，用改变className的方法，如果只改内容，用classList.add()方法-可省去写样式的冗余代码，element.className += 'class1 class2';这种方法跟add()差不多。classList返回一个DOMTokenList 对象伪数组，里面是类名，以使用 add() 和 remove() 方法修改它。add(class1, class2, ...)如果指定的类名已存在，则不会添加，remove(class1, class2, ...)移除不存在的类名，也不会报错。contains(class)返回布尔值，true类名存在，false类名不存在。toggle(class, true|false)切换类名，有则删除返回false，无则添加返回true，第二个参数可选，也可写合法表达式，是否强制添加或删除，搞不懂啥意思，一般不用。item(index)返回元素中索引值对应的类名，classList.item(0)或者classList[0]来获取类名。

二、获取元素的style，element.style.width这种方式只能获取到内联样式，设置样式可直接这样element.style.width=“100px”。获取到最终样式用getComputedStyle("element"，“可选伪元素名”).属性名。两种方式都返回CSSStyleDeclaration对象，都有的方法getPropertyValue("属性名")获取属性值，setProperty(“属性名”，“值”，“!important”)修改/设置值。removeProperty("属性名")删除属性。