Menu

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

卓优首页 > 新闻媒体 > 技术分享 > 前端开发 > 如何用JQuery操作CSS伪文档元素before或after中的content

如何用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.     content: attr(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.     display: inline–block;
  5.     width: 0px;
  6.     height: 0px;
  7.     border-top: 14px solid white;
  8.     border-left: 14px solid transparent;
  9.     border-bottom: 14px solid white;
  10.     position: absolute;
  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-top–width: 22px;
  16.     border-left–width: 22px;
  17.     border-right–width: 22px;
  18. }

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

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


关于作者
小卓

留下您的回复