常用伪元素及content属性值的使用
1.常用伪元素有 after、before,使用方法,如下
a:after{
display:block;
content:'';
}
2. content: "/\00a0";//表示斜杆
3. a标签的四个伪类:
link /* 未被访问的链接 */
visited /* 已被访问的链接 */
hover /* 鼠标指针移动到链接上 */
active /* 正在被点击的链接 */----------------------可用于其他标签
4.伪元素有六个,分别是 ::after、::before、::first-line、::first-letter、::selection、::backdrop 。
二. 获取伪元素的属性值:
获取伪元素的属性值可以使用 window.getComputedStyle() 方法,获取伪元素的CSS样式声明对象。然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。
语法:window.getComputedStyle(element,[ pseudoElement])
参数如下:
element(Object):伪元素的所在的DOM元素;
pseudoElement(String):伪元素类型。可选值有:”:after”、”:before”、”:first-line”、”:first-letter”、”:selection”、”:backdrop”;
demo:
var beforeStyle = window.getComputedStyle(myIdElement, ":before");
常用伪元素及content属性值的使用的更多相关文章
- CSS魔法堂:一起玩透伪元素和Content属性
前言 继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通 ...
- javascript_获取iframe框架中元素节点的属性值
1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口 ...
- 使用js获取伪元素的content
在测试过程中有时候会遇到反爬虫机制,一些元素会使用伪元素,这样在定位元素的时候会定位不到,这时候就要使用js来帮助定位,获取到想要的元素 下面是部分代码 //使用js获取伪元素的content Str ...
- Selenium_获取元素文本、属性值、尺寸(8)
from selenium import webdriver driver = webdriver.Chrome() driver.maximize_window() driver.get(" ...
- CSS伪元素选择器和属性选择器
伪元素 能使用伪元素来选择元素中的一些特殊位置 一.给段落定义样式 :first-letter 首字母(只能用于块元素) :first-line 第一行 1.为p元素中的第一个字符设置颜色为黄色, ...
- 利用getComputedStyle方法获取元素css的属性值
在平时的工作中有时候会碰到需要获取元素当前样式的问题,查了一下可以用getComputedStyle这个方法来获取元素计算后的样式(有些我们在css里面没有写的,浏览器默认的样式也可以获得) getC ...
- html中的meta元素及viewport属性值
<meta name="viewport" content="width=device-width , initial-scale=1.0, maximum-sca ...
- jquery 获取被点击元素的id属性值
有时候可能需要获取被点击元素的一些信息,此处就以id属性为例子,进行演示一下. $(document).click(function (e){ var v_id=e.target.id; consol ...
- image元素的src属性值与getAttribute('src')值
采集的时候,当采集到一些不可用的照片就将其剔除掉 我的解决思路是new一个img对象, 然后将采集过来的图片赋值给这个img, 然后分别处理img的onerror和 onload, 当在onerror ...
随机推荐
- C++11 并发指南一(C++11 多线程初探)
引言 C++11 自2011年发布以来已经快两年了,之前一直没怎么关注,直到最近几个月才看了一些 C++11 的新特性,今后几篇博客我都会写一些关于 C++11 的特性,算是记录一下自己学到的东西吧, ...
- TCP/IP五层层次模型
TCP/IP层次模型共分为五层:应用层HTTP.传输层TCP.网络层IP.数据链路层Data-link.物理层physical.· 应用层-应用层是所有用户所面向的应用程序的统称.IC ...
- android 手机拍照返回 Intent==null 以及intent.getData==null
手机拍照第一种情况:private void takePicture(){ Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);Si ...
- 使用swiper.js实现移动端tab切换
在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...
- 使用ueditor的时候,style样式传递到后台时被过滤没了
在项目中,使用ueditor的时候,style样式传递到后台时被过滤没了 转:https://www.cnblogs.com/theroad/p/5761743.html 经过chrome的一番调试后 ...
- 深度学习Bible学习笔记:第七章 深度学习中的正则化
一.正则化介绍 问题:为什么要正则化? NFL(没有免费的午餐)定理: 没有一种ML算法总是比别的好 好算法和坏算法的期望值相同,甚至最优算法跟随机猜测一样 前提:所有问题等概率出现且同等重要 实际并 ...
- hdu1069线性dp
/* dp[i]:取第i个方块时最多可以累多高 */ #include<bits/stdc++.h> using namespace std; struct node{ int x,y,z ...
- js读取xml文件
假设我们现在要读取下面的 info.xml 文件 <?xml version="1.0" encoding="gb2312"?> <root& ...
- C# 读取WAV文件(详细)
class WAVReader { #region RIFF WAVE Chunk private string Id; //文件标识 private double Size; //文件大小 priv ...
- SpringBatch 错误积累
1.如果nextStep在该JOB中还没有配置,也就是说nextStep还不存在的情况下,就会报错 <end on="EIXT WITH IMBALANCE" /> & ...