Форум

Кирилл Александрович · #1 (**permalink**) 15.02.2014, 21:16

Нужна помощь!

По роду службы верстаю лэндинги, и иной раз попадаются из 20-25 блоков, каждый со своим фоном. Руками это все вбивать нудно и долго, и решил я сделать скриптик...

Решить то решил, а вот как сделать, до сих пор не могу понять.

предположим есть html-код:

<div class="dark"></div>
  <div class="light"></div>

и в папке img лежать две картинки

dark.png
light.png

Как сделать так, что бы скрипт брал класс блока, и ставил соответствующую картинку фоном (background-image).?

Так же можно готовые варианты.

Заранее благодарен за помощь)

рони · #2 (**permalink**) 15.02.2014, 22:30

Кирилл Александрович,
а зачем скрипт ??
если стиль прописать можно
http://htmlbook.ru/css/background-image

Кирилл Александрович · #3 (**permalink**) 16.02.2014, 03:03

Да в css я прекрасно разбираюсь.

Но по теме

Цитата:

...20-25 блоков, каждый со своим фоном. Руками это все вбивать нудно и долго...

я и подумал, что скриптом это можно все немного сократить... Ну или много.

рони · #4 (**permalink**) 16.02.2014, 03:19

Кирилл Александрович,
классы то прописываите что стиль для класса прописать но если хочется ...

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div{
    width: 200px;
    height: 60px;
  }

  </style>
<script>
 window.onload = function ()
{
  var divs =  document.querySelectorAll('div');
  for (var i=0; i<divs.length; i++)  {divs[i].style.backgroundImage = 'url('+divs[i].className+'.gif)'}
}
</script>
</head>

<body>
 <div class="http://javascript.ru/forum/images/ca_serenity/misc/logo"></div>
 <div class="http://javascript.ru/forum/images/smilies/lol"></div>

</body>

</html>

ruslan_mart · #5 (**permalink**) 16.02.2014, 12:13

.dark, .light {
   background: url(attr(class, url) '.png');
}

Может так?

Форум

Справочник

Discord чат

Курсы javascript