是否可以在使用javascript或jQuery之前更改:

Is it possible to change :before using javascript or jQuery

本文关键字：jQuery javascript 是否      更新时间：2023-09-26

小提琴：https://jsfiddle.net/jzhang172/708p96v3/

我正在尝试使用 jquery 和 javascript 更改 ：before 背景颜色。 根据我的研究，人们说这是不可能的。 那么如何更改此图像的色调颜色呢？ 如果可以不用 ：before，那也没关系。

 $(function(){
 $('.div:before').addClass('wto');
    $('.div').css('background-color','orange');
    
    });
.div{
  height:500px;
  width:500px;
  background:url('http://movieboozer.com/wp-content/uploads/2015/05/my-neighbor-totoro-main-review.jpg');
  position:Relative;
}
.div:before{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  content:"";
  background:rgba(22, 255, 171, 0.88);
  transition:2s;
}
.div:hover:before{
  background:red;
}
body,html{
  position:Relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="div"></div>

我想你想要这样的东西： 

body,html {  position: Relative;}
.div {
  height: 500px;
  width: 500px;
  background: url('http://movieboozer.com/wp-content/uploads/2015/05/my-neighbor-totoro-main-review.jpg');
  position: Relative;
}
.div:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  background: rgba(22, 255, 171, 0.88);
  transition: 2s;
}
/***********check this block**********************/
.div:hover:before {
  background: rgba(255, 0, 0, 0.88);
  transition: 2s;
}
/*************************************************/
<div class="div"></div>

我遇到了一个肮脏的把戏。也许这可能会做你的工作。

 $(function(){
    $('#changeColor').click(function(){
    	 html = "<style>.div:before{background:rgba(22, 255, 171, 0.75) !important;}</style>"
    
    	 $('.div').append(html);
    });
});
.div{
  height:500px;
  width:500px;
  background:url('http://movieboozer.com/wp-content/uploads/2015/05/my-neighbor-totoro-main-review.jpg');
  position:Relative;
}
.div:before{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  content:"";
  background:rgba(0, 0, 0, 0.75);
  transition:2s;
}
body,html{
  position:Relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a href="#" id="changeColor">Change</a>
<div class="div">&nbsp;</div>

如果我正确理解你的问题，你明确地问你如何使用javascript做到这一点。

据我所知，你无法用javascript影响伪元素。

但同样，如果我没记错的话，你不关心伪元素，你只想给图像着色并在:hover上更改该颜色。这实际上是可能的，虽然有点复杂，所以我不能在这里给你一个解决方案，只是一些指示：

选项一：CSS 过滤器和 SVG

您是否知道CSS有一个filter属性，可让您执行诸如添加模糊或更改对比度之类的操作？这里有一个很好的概述和示例。

使用该属性，您还可以加载 SVG 过滤器并将该过滤器应用于您的元素、图像（在您的情况下）以及可能适用于大多数其他元素。SVG 滤镜允许您指定可用于为图像着色的颜色矩阵，实际上 CSS filter 属性已经内置了一个 SVG 滤镜，用于为图像着色棕褐色。

所以这里有一个关于为灰度图像着色的教程。通过一些试验和错误，我认为您可以构建自己的颜色矩阵来对彩色图像执行相同的操作（特别是因为它们还解释了棕褐色矩阵的工作原理）。

请注意，此方法有其局限性。

选项二：Javascript魔法

我不会写太多关于这些的文章，因为我在SO上找到了两篇帖子，告诉你你需要知道的一切：

您可以编写自己的代码来为图像着色，也可以使用 jQuery 插件来实现这种效果。

由于您的 Div 采用背景图像，我将改为更改 Div 中背景颜色的值，并赋予 ：before 的背景颜色一个继承值。

.div
{
  background-color: rgba(22, 255, 171, 0.88);
}
.div:before
{
  background-color: inherit;
}

要更改 Div：before的背景颜色：

Div.style['background-color'] = 'rgba(0, 255, 255, 0.88)';
相关文章：