JavaScript修改CSS伪元素:after和:before的样式

页面导航:首页 > 网络编程 > JavaScript > JavaScript修改CSS伪元素:after和:before的样式

JavaScript修改CSS伪元素:after和:before的样式

来源: 作者: 时间:2016-01-23 10:23 【

CSS伪元素:before和:after可以实现很多有趣的功能,我们项目中使用的ionicframework框架的ionic css文件中大量使用到了这2个伪元素。伪元素可以用来定义样式,但是和正常的dom元素不同,我们

伪元素:before和:after可以实现很多有趣的功能,我们项目中使用的ionicframework框架的ionic.css文件中大量使用到了这2个伪元素。伪元素可以用来定义样式,但是和正常的dom元素不同,我们没有办法选中这些伪元素,也就不能像普通元素那样来修改它。

 




I am a programmer.

这段HTML中我们用到了:before和:after在content前面和后面添加了target-before和target-after。如果我们想实现这个功能:点击按钮的时候,将target-before和target-after变成相应的颜色。这个时候我们就需要修改伪元素中定义的样式了。

 

我们没有办法直接选中伪元素来修改它的样式,只能是通过新增伪元素来覆盖之前伪元素的样式。

 

function changeColor(colorRGB)
{
	$(
	
	<script>
	
	$(function(){
	
		$(button).click(function(){
			var cls = $(this).text();
			$('.content').removeClass().addClass('content ' + cls);
		});
	
	
	})


</script>

	
I am a programmer.

 

还有一点值得注意:如果我们只是需要修改伪元素的content属性,那么可以有更简单、优雅的实现方式。可以使用attr函数,伪元素的content属性支持这个方法。

 



<script>
	window.onload = function(){
		document.getElementById('attrText').addEventListener('keyup', function(){
			document.getElementById('ribbon').setAttribute('ribbon', this.value);
		});
	}

</script>



ribbonElement.setAttribute('ribbon', )
 

 
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<