在不使用HTML样式属性

Question

TL;博士

在不使用HTML background-image: url()属性的情况下，可以使用哪些其他动态解决方案为页面设置 style="" ？

我的页面以我设置url()的13个元素开头，当你滚动到页脚时，我们的lazy-loader将加载9个（最多12个）更多元素，这些元素又有自己独特的＆＃34;动态＆＃34;图像集。

我认为我们只需要点击我们的搜索引擎优化得分，因为我不相信有更好的解决方案。

注意： 如果需要，我可以创建一个JS小提琴，但我认为这个描述得很好/通用，不需要它。如果需要回答，请告诉我。

目的

我们公司正在努力提高他们的网站搜索引擎优化得分，我们确定要修复的项目之一是将所有HTML样式属性移动到单个CSS文件（或<style></style>声明）。我认为这被称为问题的原因是因为我们有几个元素使用它来设置他们的文章background-image: url();。

为什么不直接使用<img>标记？

我们的客户在发布文章时有很多不同类型的图像（尺寸，焦点中心等）。为了让我们拥有最一致的设计而不管屏幕大小是使用CSS background-image样式而不是<img> HTML标记。我们还处理了一些WP / XMLRPC发布约束，我们无法为此创建自定义解决方案。

所以我们不能使用HTML，如果可以的话，这将很容易解决。

为什么当前在style属性中设置了这个？

这是最好的＆＃34;动态＆＃34;到目前为止我们找到了解决方案。到目前为止（这影响了我们的搜索引擎优化得分），这从来就不是问题。在我们的CSS样式中，我们有共享的.class {}特定背景图像样式。每篇文章唯一不同的是图片网址，因此我们通过PHP动态地在style="background-image: url();"属性中设置它。

问题

我的页面以我设置url()的13个元素开头。我＆＃34;可以＆＃34;在顶部有内联CSS，我为这些元素设置动态类，这些元素将具有独特的background-image: url();，即使设置/操作听起来很痛苦，这也可以工作。

但是当您滚动到页脚时，我们发生了延迟加载。我们加载9个（最多12个）元素，再次拥有自己独特的＆＃34;动态＆＃34;图像设置，全部通过AJAX。我可以在这里做同样的事情，创建另一个内联<style></style> CSS位...但这里是踢球者。我们的其他SEO投诉之一是我们将多个内联CSS（以及JS）组合到一个声明中。如果我不断创建更多<style></style>声明以修复此SEO问题，我将创建/恶化另一个SEO问题。

问题

在不使用HTML background-image: url()属性的情况下，可以使用哪些其他动态解决方案为页面设置 style="" ？

我认为我们只需要在这一点上获得我们的搜索引擎优化得分，因为我不相信有更好的解决方案。

Answer 1

一个想法是使用对SEO分数没有影响的数据属性更改background-image内联样式，然后您可以添加一些JS代码，以便将它们更改为内联样式。

当然这可能会对其他脚本产生影响，因为我不知道你的网站是如何构建的，所以你可以将这个JS代码添加为第一个JS代码，这样你的所有内联样式都会被更改，你就可以了任何未来剧本。

$('.box').each(function() {
  var url = $(this).data('background');
  $(this).css('background-image','url('+url+')');
})

.box {
  width:100px;
  height:100px;
  display:inline-block;
  background-size:cover;
  border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-background="https://lorempixel.com/400/200/">
</div>
<div class="box" data-background="https://lorempixel.com/300/200/">
</div>
<div class="box" data-background="https://lorempixel.com/400/400/">
</div>

顺便说一句，我们可以将此解决方案概括为任何内联样式。因此，我们的想法是将所有样式设置为数据属性，然后我们只需将它们更改为内联样式：

$('[data-style]').each(function() {
  $(this).attr('style',$(this).data('style'));
  /*Not mandatory*/
  $(this).removeAttr('data-style');
})

.box {
  width:100px;
  height:100px;
  display:inline-block;
  background-size:cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-style="background-image:url(https://lorempixel.com/400/200/);padding:20px;border-color:yellow;">
</div>
<div class="another-box" data-style="background-image:url(https://lorempixel.com/200/200/);margin:20px;border:5px solid pink;height:50px;">
</div>
<div data-style="background-image:url(https://lorempixel.com/200/200/);height:200px;">
</div>

NB ：正如我上面评论的那样，我们需要在网站的复杂性和我们获得的分数之间取得平衡。如果我们可以轻松获得80％，则不需要使网站过于复杂，以便有85％或90％，并且可能会产生一些错误或难以维护网站。