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

js 动态修改_after_before伪元素content值

今天做了一个有关js如何绑定动态修改伪类的content的内容,运用到的有( :before 和 :after 伪元素、CSS content 属性、data-* H5新属性、js)等技术。...attr(data-content-after);和content: attr(data-content-before); 这样content可以获取到box添加data-content-after属性里的值...:after(before同理) 6)最后通过js获取到box对象,通过box对象attributes找到添加的 [data-content-before=":before"]和[ data-content-after...=":after"]属性的value,有了value值,这就可以进行动态修改 before伪元素和:after 伪元素里的content值; 以此现在做一个笔记以便以后使用,Hope to help...:before //console.log(boxAfter);//输出为 :after //下面可以自定义boxBeforeVal和boxAfterVal的值

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

    vue.js: 自定义事件之—— 子组件修改父组件的值

    如何利用自定义的事件,在子组件中修改父组件里边的值?...就是为了让子组件用的,你得把值给了子组件吧!...),好交代让它出征去改动父组件的值,并让他带上一个参数(就是要把父组件的值改成啥,荆轲手里拿的那个包着小匕首的地图,),让他去带话 ,既出使秦国(父组件内部)将燕王(子组件)的旨意传递给父元素(秦大王)...)去执行改动父元素值(改变秦王老大的想法,比如不揍燕国,到项目中就是改变付元素中某个状态值等)的伟大壮举。...1111.png 第十步:深明大义的父组件,早在methods中定义好了要修改的逻辑,将要修改的值等于函数带来的参数值(也就是自定义事件捎来的子组件中定义的值) 1212.png 最后!

    6.8K40

    容易被误解的overflow:hidden

    overflow:hidden并不隐藏所有溢出的子元素 对于overflow:hidden的最大误解时:当一个具有高度和宽度中至少一项的容器应用了overflow:hidden时,其内部的任何溢出的内容都将被剪裁...事实是拥有overflow:hidden样式的块元素内部的元素溢出并不总是被隐藏,具体来说,需要同时满足以下条件: 拥有overflow:hidden样式的块元素不具有position:relative...overflow:hidden的父元素之外,但是它依然被显示了。...这就说明,一个绝对定位的元素是否被overflow:hidden隐藏,要看其包含块相对于overflow:hidden的位置来决定。这就好比驻日美军,他们不受日本的法律约束而受美国军法约束。...首先,我们知道overflow:hidden并不是万能的,要想彻底剪裁它的所有子元素,它不但要有overflow:hidden,而且还要作为所有子元素的包含块。

    4.4K110

    JS|函数的返回值

    我们先来看一组代码 function kunkun(aru){ console.log(aru)}kunkun('打篮球') 这个看似能输出结果,实则是在逻辑上是不合理的,我们函数是做某件事或者实现某种功能...所以,接下来我会介绍一种逻辑更严谨的代码。 解决方案 return语句 有的时候,我们希望函数将返回值返回给调用者,此时通过使用return语句就可以实现。...函数的返回值格式 function 函数名(){ return 需要返回的结果;}函数名(); 函数只是实现某种功能,最终的结果需要返回给函数的调用者。是通过return来实现的。...只要函数遇到return就会把后面的结果,返回给函数的调用者。...num2){ return num1 + num2;}console.log(sum(1,2)) 结果输出为:3 由此可知,不要在函数的内部输出结果,应该return给函数的调用者。

    16.6K10

    如何修改伪元素的content属性的值

    前面一篇文章我们了解如何用js控制伪元素的样式,接下来我们看看如何修改伪元素的content属性,因为伪元素并不存在在dom中,所以我们只能通过修改样式表的方式来修改content内容,除了修改样式表还有另外一种方式...首先我们看如何通过修改样式表的方式修改伪元素content的内容,代码如下: <!...+ '" }', 0); }) 这里需要注意下,代码中获取的content中的值是带有双引号的,如果要使用的话需要去除双引号。...第二种方式我们使用css的attr函数来指定content的内容指向,然后修改其指向的data-属性: <!...}) 以上便是使用js修改伪元素content的使用方式,希望对你有所帮助。

    8.1K21

    display:none和visibility:hidden的区别

    空间占据上的区别 如果用文字来描述,简单一句话就是display:none的元素是彻底消失,也就是说该元素的宽度、高度等各种属性值都将“丢失”,不在文档流中占位,浏览器也不会解析该元素;而visibility...:hidden只是视觉上消失了,可以理解为透明度为0(opacity:0)的效果,它仍具有高度、宽度等属性值,因此在文档流中占位,浏览器会解析该元素。...因此,我们可以知道display:none的元素隐藏后不占据额外空间,状态切换会产生回流和重绘,而visibility:hidden的元素虽然隐藏了,但它们仍然占据着空间,它的状态切换只会引起页面重绘。...但div22却继承了div2的visibility:hidden。 div11: ? div22: ?...JS运用中的一些区别(学习JS后可以自行编写简单代码尝试) 事件绑定 display:none 的元素都已经不再页面存在了,因此肯定也无法触发它上面绑定的事件; visibility:hidden 元素上绑定的事件也无法触发

    2.4K20
    领券