时间:2021-05-18
层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”。
前面的话
无法直接给before和after伪元素设置js效果
例子说明
现在需要为(id为box,内容为"我是测试内容"的div)添加(:before内容为"前缀",颜色为红色的伪类)
解决办法
【方法一】动态嵌入CSS样式
IE8-浏览器将<style>标签当作特殊的节点,不允许访问其子节点。IE10-浏览器支持使用styleSheet.cssText属性来设置样式。兼容写法如下:
【方法二】添加自带伪类的类名
[缺点]此方法无法控制伪元素里面的content属性的值
【方法三】利用setAttribute实现自定义content内容
[注意]此方法只可用setAttribute实现,经测试用dataset方法无效
【方法四】添加样式表
firefox浏览器不支持addRule()方法,IE8-浏览器不支持insertRule()方法。兼容写法如下:
[缺点]该方法必须有内部<style>或用<link>链接外部样式,否则若不存在样式表,则document.styleSheets为空列表,则报错
【方法五】修改样式表
先使用方法四添加空的样式表,然后获取新生成的<style>并使用其innerHTML属性来修改样式表
[注意]只能使用getElementsByTagName('style')[1]的方法,经测验使用stylesheets[1]方法无效
DEMO
<演示框>点击下列相应属性值可进行演示
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个conte
效果效果图如下实现思路div实现太阳的一条矩形光影before伪元素制作另一条光影矩形,和已有的转变90°after伪元素画个圆实现太阳样式dom结构用
content属性一般用于::before、::after伪元素中,用于呈现伪元素的内容。平时content属性值我们用的最多的就是给个纯字符,其实它还有很多值
本教程简单的介绍一下关于CSS伪类:before,:after详解,有需要了解的朋友可以参考一下下。:before伪元素在元素之前添加内容这个伪元素允许创作人员
第一部分:基础知识1.与:active和:hover这些伪类不一样,他们都是伪元素。2.:before/:after伪元素是在css2中提出来的。而::befo