如何用JQuery操作CSS伪文档元素before或after中的content

JQuery代码

在前端定制化建站过程中,偶尔会遇到要用JQuery来操作CSS伪文档元素的情况,JQuery操作真实的文档元素大家都很熟悉,但如果按照操作真实的文档元素那样操作伪文档元素,就会发现完全不起作用。那么JQuery能不能操作伪文档元素呢?

其实也是可以的,只是操作方法有些不同。

如果你要处理的是content属性,那么可以把内容传入先伪文档元素的data attribute中,然后通过JQuery修改他的父元素的”data-content”来操控它,从而改变伪文档元素before或者after中content属性的值。

在HTML文件中:

  1. <span>foo</span>

在JQuery文件中:

  1. $(‘span’).hover(function(){
  2.     $(this).attr(‘data-content’,’bar’);
  3. });

在CSS文件中:

  1. span:after {
  2.     contentattr(data-content) ‘ any other text you may want’;
  3. }

如果你要改的是伪文档元素中非content属性,那就不能这么像上面这样做了,因为非content不支持attribute。但是可以考虑用给:before或者:after增加一个class,例如叫”changed”,通过JQuery的toggleClass完成操控。

在HTML文件中:

  1. <ul class=“pageMenu”>
  2. <li class=“active”>a</li>
  3. <li>b</li>
  4. <li>c</li>
  5. </ul>

JQuery文件中:

  1. $(‘.pageMenu .active’).toggleClass(‘changed’);

在CSS文件中:

  1. .pageMenu .active::after {
  2.     content;
  3.     margin-top: –6px;
  4.     displayinlineblock;
  5.     width0px;
  6.     height0px;
  7.     border-top14px solid white;
  8.     border-left14px solid transparent;
  9.     border-bottom14px solid white;
  10.     positionabsolute;
  11.     rightright: 0;
  12. }
  13. .pageMenu .active.changed:after {
  14. /* this selector is more specific, so it takes precedence over the other :after */
  15.     border-topwidth22px;
  16.     border-leftwidth22px;
  17.     border-rightwidth22px;
  18. }

好啦,赶快来试试效果吧!以后在前端定制化建站中就不怕再遇到要用JQuery操控CSS伪文档元素的情况了。

>>原创文章,欢迎转载。转载请注明:转载自惠州市卓优互联科技有限公司,谢谢!
>>原文链接地址:如何用JQuery操作CSS伪文档元素before或after中的content


关于作者

留下您的回复