常用伪元素及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 ...
随机推荐
- js学习、备忘
字符串使用单引号’abc’.(双引号也行.推荐:html→双引号,js→单引号)===严格等于.!==严格不等于if(x) 当x为undefined.null和0的时候都为false:需注意当x为0 ...
- AndroidStudio、gradle、buildToolsVersion关系
使用AndroidStudio 开发也已经2年了,每次gradle 或者studio 有推荐更新后,项目重新sync后都会报错,提示更新相应的其他版本,比如AndroidStudio.gradle.b ...
- JavaScript 使用 mediaDevices API 选择摄像头
大多数智能手机都有前置和后置摄像头,当你在创建视频应用时你可能想要选择或者切换前置.后置摄像头. 如果你开发的是一款聊天应用,你很可能会想调用前置摄像头,但如果你开发的是一款拍照软件,那么你会更倾向于 ...
- mac安装navicat mysql破解版
下载破解中文版http://m6.pc6.com/xuh6/navicat12027pre.zip 完成下载后无法正常进行安装,此时应该打开命令行执行 sudo spctl --master-disa ...
- react之异步请求数据,render先行渲染报错,未拿到数据
import React from 'react' import {connect} from 'react-redux' import { Redirect} from 'react-router- ...
- 温故而知新--JavaScript书摘(二)
前言 毕业到入职腾讯已经差不多一年的时光了,接触了很多项目,也积累了很多实践经验,在处理问题的方式方法上有很大的提升.随着时间的增加,愈加发现基础知识的重要性,很多开发过程中遇到的问题都是由最基础的知 ...
- Lavarel - 模块间复用代码
代码复用在项目中早晚会遇到,这不在用 Laravel 给博客增加 Feed 订阅功能 就到了需要将生成网页 description 的函数提取出来,在文章显示与 Feed 生成的两个 Controll ...
- poj2464扫描线好题,回头再做
扫描线+区间更新 题解 /* st[i],ol[i]表示y坐标大于y[i]和小于y[i]的点 两颗线段树建立在y轴上,区间[l,r]ol线选在[l,r]时st的分数 每次查询完成后再更新一次 遍历每条 ...
- python 全栈开发,Day128(创建二维码,扫码,创建玩具的基本属性)
昨日内容回顾 1.app播放音乐 plus.audio.createPlayer(文件路径/URL) player.play() 播放音乐 player.pause() 暂停播放 player.res ...
- kettle的下载、安装和初步使用(windows平台下)(图文详解)
kettle的下载 Kettle可以在http://kettle.pentaho.org/网站下载 http://sourceforge.net/projects ...