javascript - 线性渐变不适用于 javascript

Question

我有这个，如果我设置背景并将线性渐变放入 data-src 之前它可以工作，但是当我将其更改为它以支持更多浏览器时，它不再工作了。背景设置为图像，但渐变未显示。发送到控制台的消息是

linear-gradient(to top, rgba(2, 0, 36, .8) 0%, rgba(0, 0, 0, 0) 100%), url('/static/images/mountain .jpg');

var url = "url( '" + slide.dataset.src + "')";

slide.style.backgroundImage = url;
if (slide.dataset.type == 'linear') {
  var direction = slide.dataset.lindir;
  var linstart = slide.dataset.linstart;
  var linend = slide.dataset.linend;

  var gradient = "linear-gradient(" + direction + ", " + linstart + ", " + linend + ")";

  if (!(url == null)) {
    gradient += (", " + url);
  }

  gradient += (";");

  console.log(gradient);
  slide.style.background = "-moz-" + gradient;
  slide.style.background = "-webkit-" + gradient;
  slide.style.background = gradient;
}

<div class="content category cursor-hand has-text-centered load" data-type="linear" data-lindir="to top" data-linstart="rgba(2, 0, 36, .8) 0%" data-linend="rgba(0, 0, 0, 0) 100%" data-src="{{ category.url }}">

Answer 1

根本问题是您不需要添加分号，因为您是在 JavaScript 中设置样式，而不是将样式添加到样式表。我在下面对此进行了评论，您可以看到它有效。

正如其他人所指出的，您还错误地使用了 vendor 前缀。见 Setting vendor-prefixed CSS using javascript有关该主题的更多信息。

不过请注意，support for multiple CSS backgrounds goes back to IE 9 ，因此您可能根本不需要前缀。

需要注意的一件事是，由于除了 background-image 之外，您没有在 JS 中设置任何其他背景属性，因此最好使用 style.backgroundImage而不是切换到 style.background。这将使您能够控制样式表中 background 速记中包含的其他属性。

var slide = document.querySelector('.slide');

var url = "url( '" + slide.dataset.src + "')";

slide.style.backgroundImage = url;
if (slide.dataset.type == 'linear') {
  var direction = slide.dataset.lindir;
  var linstart = slide.dataset.linstart;
  var linend = slide.dataset.linend;

  var gradient = "linear-gradient(" + direction + ", " + linstart + ", " + linend + ")";

  if (!(url == null)) {
    gradient += (", " + url);
  }

  //gradient += (";");

  console.log(gradient);
  slide.style.MozBackground = gradient;
  slide.style.WebkitBackground = gradient;
  slide.style.background = gradient;
}

.slide {
  width: 300px;
  height: 300px;
}

<div class="slide content category cursor-hand has-text-centered load" data-type="linear" data-lindir="to top" data-linstart="rgba(2, 0, 36, .8) 0%" data-linend="rgba(0, 0, 0, 0) 100%" data-src="{{ category.url }}"></div>