常用伪元素及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 ...
随机推荐
- android-----带你一步一步优化ListView(一)
ListView作为android中最常使用的控件,可以以条目的形式显示大量的数据,经常被用于显示最近联系人列表,对于每一个 Item,均要求adapter的getView方法返回一个View,因此L ...
- vue系列之概念
一.模板引擎 通常出现在应用层,即服务器端(MVC层中的view) 客户端HTTP请求->应用层的控制器(Controller)->应用层的服务层(Service,访问数据库)->封 ...
- 深入理解JS中的变量及变量作用域
JS的变量有两种,“全局变量”和“局部变量”. “全局变量”声明在函数外部,可供所有函数使用,(全局变量属于window)而“局部变量”声明在函数体内部,只能在定义该变量的函数体内使用. 1.全局变量 ...
- JFreeChart入门
JFreeChart主要用来各种各样的图表,这些图表包括:饼图.柱状图(普通柱状图以及堆栈柱状图).线图.区域图.分布图.混合图.甘特图以及一些仪表盘等等 (源代码下载) 示例程序运用的jar包: j ...
- npm install 报错(npm ERR! errno -4048,Error: EPERM: operation not permitted,)解决方法
npm ERR! path E:\SouthernPowerGridProject\web_project\AutoOPS\autoops\node_modules\fsevents\node_mod ...
- js获取iframe中的元素
var obj=document.getElementById("iframe的name").contentWindow; var ifmObj=obj.document.getE ...
- 【python】已安装模块提示ImportError: No module named
今天遇到了一个问题,运行代码时出现错误 Traceback (most recent call last): File , in <module> import zmq ImportErr ...
- CSS 滤镜
声明: web前端学习笔记,欢迎大神指点.联系QQ:1522025433. CSS样式表是一种为超文本标签语言提供增强补充服务的技术,可对每一个html的标签做精雕细刻的修饰.只用html制作的网页, ...
- python 全栈开发,Day96(Django REST framework 视图,django logging配置,django-debug-toolbar使用指南)
昨日内容回顾 1. Serializer(序列化) 1. ORM对应的query_set和ORM对象转换成JSON格式的数据 1. 在序列化类中定义自定义的字段:SerializerMethodFie ...
- 《必须知道.NET》3.OO之美
3.2 依赖的哲学 3.2.1 本质诠释 "不要调用我们,我们会调用你" 3.2.2 什么是依赖,什么是抽象 "耦合是不可避免的" (1)什么是依赖和耦合 依赖 ...