Question

我有一个简单的div包含一堆列表项，我需要用javascript设置它们的背景？任何帮助都会非常感激，请说我有url1，url2，url3，url4？

<div class="banner">
  <ul>
    <li style="background-image: url('img/sunset.jpg');">
      <div class="inner">
        <h1>The jQuery slider that just slides.</h1>
        <p>No fancy effects or unnecessary markup, and it’s less than 3kb.</p>
        <a class="btn" href="#download">Download</a> </div>
    </li>
    <li style="background-image: url('img/wood.jpg');">
      <div class="inner">
        <h1>Fluid, flexible, fantastically minimal.</h1>
        <p>Use any HTML in your slides, extend with CSS. You have full control.</p>
        <a class="btn" href="#download">Download</a> </div>
    </li>
    <li style="background-image: url('img/subway.jpg');">
      <div class="inner">
        <h1>Open-source.</h1>
        <p>Everything to do with Unslider is hosted on GitHub.</p>
        <a class="btn" href="//github.com/idiot/unslider">Contribute</a> </div>
    </li>
    <li style="background-image: url('img/shop.jpg');">
      <div class="inner">
        <h1>Uh, that’s about it.</h1>
        <p>I just wanted to show you another slide.</p>
        <a class="btn" href="#download">Download</a> </div>
    </li>
  </ul>
</div>

Answer 1

我的建议是为您想要的每种背景图像样式创建单独的CSS类。然后你可以使用像jQuery这样的库来将addClass添加到任何HTML元素。这是jQuery文档：addClass

理想情况下，您希望避免使用JavaScript代码卷积CSS，并尽可能将这两者保持独立。

如何在Javascript中设置列表项的背景图像？

1 个答案: