首页
学习
活动
专区
工具
TVP
发布

js 动态修改_after_before元素content

今天做了一个有关js如何绑定动态修改content内容,运用到有( :before 和 :after 元素、CSS content 属性、data-* H5新属性、js)等技术。...:before元素和:after 元素; 4):before元素和:after 元素里各自添加content属性; 5)content 和 attr 配合使用: content: attr...(data-content-after);和content: attr(data-content-before); 这样content可以获取到box添加data-content-after属性里...=":after"]属性value,有了value,这就可以进行动态修改 before元素和:after 元素content; 以此现在做一个笔记以便以后使用,Hope to help...box.attributes[1].value = ':before元素'; box.attributes[2].value = ':after元素';

10.8K20
您找到你想要的搜索结果了吗?
是的
没有找到

CSS中类和元素

定义 类 CSS 类 是添加到选择器关键字,指定要选择元素特殊状态。 例如,:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮颜色。...元素 元素是一个附加至选择器末关键词,允许你对被选择元素特定部分修改样式。 下例中 ::first-line 元素可改变段落首行文字样式。 /* 每一个 元素第一行。... p:first-letter { font-size: 5em; } 从上述例子中可以看出,操作对象是文档树中已有的元素,而元素则创建了一个文档数外元素。...因此,类与元素区别在于:有没有创建一个文档树之外元素。...总结 1.类本质上是为了弥补常规CSS选择器不足,以便获取到更多信息; 2.元素本质上是创建了一个有内容虚拟容器; 3.CSS3中类和元素语法不同; 4.可以同时使用多个类,而只能同时使用一个元素

2.7K10

CSS类与元素

https://github.com/WindrunnerMax/EveryDay CSS引入类和元素概念是为了格式化文档树以外信息。...也就是说,类和元素是用来修饰不在文档树中部分,比如,一句话中第一个字母,或者是列表中第一个元素。...类用于当已有元素处于某个状态时,为其添加对应样式,这个状态是根据用户行为而动态变化。比如说,当用户悬停在指定元素时,我们可以通过:hover来描述这个元素状态。...虽然它和普通css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述状态下才能为元素添加样式,所以将其称为类。 状态性类 是基于元素当前状态进行选择。...实际上,元素就是选取某些元素前面或后面这种普通选择器无法完成工作。控制内容和元素是相同,但它本身是基于元素抽象,并不存在于文档结构中。

1.9K20

总结类和元素(转)

直译过来就是:css引入类和元素概念是为了格式化文档树以外信息。也就是说,类和元素是用来修饰不在文档树中部分,比如,一句话中第一个字母,或者是列表中第一个元素。...下面分别对类和元素进行解释: 类用于当已有元素处于某个状态时,为其添加对应样式,这个状态是根据用户行为而动态变化。...因此,类与元素区别在于:有没有创建一个文档树之外元素。 3.元素是使用单冒号还是双冒号?...实际上,元素使用单冒号还是双冒号很难说得清谁对谁错,你可以按照个人喜好来选择某一种写法。 4.类与元素具体用法 这一章以含义解析和例子方式列出大部分类和元素具体用法。...如下例,url中target命中id为targetarticle元素,article元素背景会变为黄色。 URL: http://example.com/#target HTML: ?

1.4K20

元素作用_获取iframe中元素

大家好,又见面了,我是你们朋友全栈君。...目标网站红薯中文网 获取网页源代码也获取不了这些动态渲染数据 所以用简单,但是有点麻烦方法 使用selenium执行js,或者直接在浏览器里面执行js function kkk(){...} kkk() 另外,还有大部分数据是加密,也很简单 function long2str(v, w) { var vl = v.length; var sl = v[vl - 1] & 0xffffffff...76980100是上一个请求获取解密密钥 套用即可 解密之后,里面的参数是对应 context_kw11 这个就是对应元素class,将这个都拿去用selenium执行js方法获取到结果...如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

6K30

js、jQuery 获取文档、窗口、元素各种

(其会受滚动条影响,相当于整个文档,整个页面的Y) IE9之下并不支持这个属性 clientY: 鼠标相对于浏览器窗口左上角偏移(其不会受滚动条影响,相对于滚动条当前位置浏览窗口...在当前触发鼠标事件元素和它祖先元素中找到最近具有定位属性元素,计算鼠标与其偏移, 以找到元素border左上角外交点作为相对点。...offsetY : offsetY和layerY不同在于,前者在计算偏移时,相对于元素border左上角内交点, 因此当鼠标位于元素border上时,偏移是一个负值...另外offsetY并不在乎触发事件元素是否有定位属性,它总是相对于触发事件元素来计算偏移。...2.在元素具有上边框border-top情况下, layerY比offsetY多一个border-top宽度

14K32

元素清除浮动(重要) 利用元素:after清除浮动

利用元素:after清除浮动 让页面呈现多列布局时经常会使用 float:left/right ,可是浮动布局会导致父元素高度为0(未设置高度情况下),不会根据子元素高度而变化,另外,后面不需要浮动想在下一行显示标签出现在浮动元素后面...所以我们在使用浮动进行布局时候会需要一个块级元素(行内元素无效)来设置 clear 属性,如果浮动元素下方本来就有元素,那我们可以直接对该元素设置 clear:both ,若没有其他元素需要展示,我们往往会写一个空白标签来清除浮动... 但是这样无疑会增加浏览器渲染负担,所以考虑使用元素 :after 来代替这个空白标签,因为清除浮动需要在浮动元素后面,所以不可以使用...:before ,对 :after 设置 content:"" ,并使其 display:block 成为块级元素后 clear:both 来清除浮动: #content:after{content:"

2.9K40

CSS元素介绍

什么是元素 元素表示了某个元素元素。这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。 因为元素并不在文档树中,所以通过JS,也抓取不到元素,也不能给它绑事件。...常见元素 ::before 在当前元素内容前面插入一个子元素。插入元素为内联元素。 需要注意是,使用::before时, 必须使用content来指定子元素内容。...什么时候用元素 HTML 标签目的,就是为了展示内容信息。非内容信息要使用元素。 具体使用场景是图标和清除浮动。 所谓非内容信息,指的是一些对内容进行修饰信息。...外链.png demos 那些 CSS 偽元素可以幫你做 10 個效果 基于单个 div CSS 绘图 注 块级元素指display为block, inline-block, table-cell...相关文章 CSS元素一些坑

81540

CSS元素基本使用

CSS元素基本使用 上一篇文章介绍了很多个使用,这篇来说一下元素元素之所以称为“”,主要是因为它不是真正网页里元素,但是标线行为又跟真正网页元素一样,也可以对其使用css操作。...元素比较少,今天就一个个用法,不分门别类了。 一、::after和::beore after和before用比较多一些。...: '*'; color: red } 二、::before 略 三、::cue 匹配所选元素WebVTT提示。...四、::first-letter 修改块级元素第一行第一个字母,比如你经常看到故事书中第一个文字是大写,就可使用它在页面上做对应设置 五、::first-line 用在块级元素第一行 六、...模板 中元素,这对于我们现在使用框架而不是再自创标签用户来说,很少会用到

91000

CSS-类和元素

背景 写了这么多年代码,对CSS中类和元素竟然没有细致进行过学习总结,由此可见在实际代码开发中,用也确实不多,也就用过一些:first-child,:hover之类吧,其它连before...什么都没用过,于是迫切需要大于元素类进行一个系统整体学习。...类和元素 类:是以一个冒号作为前缀,被添加到选择器末尾,当你希望在特定状态下(:hover)才被呈现到指定元素时,可以往元素选择器后面加上类。...常用类和元素 类可以从状态类类、结构类类、其它类和表单相关类进行分类。...,其中content属性指定要加入内容,content必须有(空也可以),其默认inline,可以通过display:block改变.

99620

CSS 基础系列:类和元素

CSS 引入类和元素概念是为了格式化文档树以外信息。也就是说,类和元素是用来修饰不在文档树中部分,比如,一句话中第一个字母,或者是列表中第一个元素。...2.类和元素概念 2.1 类: 类用于当已有元素处于某个状态时,为其添加对应样式,这个状态是根据用户行为而动态变化。...2.2 元素 元素用于创建一些不在文档树中元素,并为其添加样式。 例如,我们可以通过 :before 来在一个元素前增加一些文本,并为这些文本添加样式。...3.类列举 类和元素-1.png 3.1 状态类 状态类是基于元素当前状态进行选择。在与用户交互过程中元素状态是动态变化,因此该元素会根据其状态呈现不同样式。...还是看那段代码: 类和元素-4.png p:first-of-type: 匹配到是p元素,因为p是div所有为p元素第一个,事实上这里也只有一个为p元素; h1:first-of-type

1.4K10

我可能学到了“假”CSS:元素

CSS选择器除了根据id、class、属性等从DOM中获取元素以外,还有很重要一类,用来获取元素特别内容或特别状态,这就是 元素(Pseudo-elements) 和 类(Pseudo-classes...) [I] 元素 元素是对元素特定内容进行操作,选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通选择器无法完成工作。...元素display计算必须是 block, inline-block, table-cell, list-item或者table-caption 可以作为首字符元素就是 数字,英文字母,中文以及...:hidden或者display:none隐藏::first-letter元素,是不会生效 开头元素支持部分display属性标签嵌套 如果是inline, block, table, table-row...标签,对应h2就会高亮 一些简单tab切换等也可以在不借助js情况下用:target实现了 [2.2] 用:not过滤掉不符合元素 :not(x)括号中可以应用几乎所有的选择器语法 :not可以搭配其他类使用

1.4K10

CSS类与元素「建议收藏」

为什么要引入类与元素? css引入类和元素概念是为了格式化文档树以外信息。...也就是说,类和元素是用来修饰不在文档树中部分,比如,一句话中第一个字母,或是列表中第一个元素,又或者是鼠标悬停在某个超链接上时要设置样式。 什么是类,元素?...比如说,我们可以通过:before来在一个元素前增加一些文本,并为这些文本添加样式。 分类:状态类和结构性类 状态类:是基于元素当前状态进行选择。...元素应用: 清除浮动:如果父元素所有子元素都是浮动,父元素高度则无法撑开。可以通过对父元素添加after类撑开父元素高度,因为after就是其最后一个子元素。...counter-reset: 属性设置某个选择器出现次数计数器

1.4K20

重新认识类和元素

熟悉前端的人都会听过css类与元素,然而大多数的人都会将这两者混淆(包括我)。那今天就让我们来看看类和元素区别吧!...直译过来就是:css引入类和元素概念是为了格式化文档树以外信息。也就是说,类和元素是用来修饰不在文档树中部分,比如,一句话中第一个字母,或者是列表中第一个元素。...:checked 被选中input元素 :empty 匹配没有子元素元素 :valid 匹配条件验证正确表单元素元素 元素前面是两个冒号,E::first-line 元素。...对于元素 :before 和 :after 而言,属性 content 是必须设置,我们知道属性可以为字符串,也可以有其它形式,比如指向一张图片 URL: content: url('img/...效果可以通过添加一个实际类来达到,而元素效果则需要通过添加一个实际元素才能达到,这也是为什么他们一个称为类,一个称为元素原因。

93520
领券