Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Фон блока соответствующий классу. (https://javascript.ru/forum/misc/45124-fon-bloka-sootvetstvuyushhijj-klassu.html)

Кирилл Александрович 15.02.2014 21:16

Фон блока соответствующий классу.
 
Нужна помощь!

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

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

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

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


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

dark.png
light.png


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

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

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

рони 15.02.2014 22:30

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

Кирилл Александрович 16.02.2014 03:03

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

Но по теме
Цитата:

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

рони 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 16.02.2014 12:13

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


Может так?


Часовой пояс GMT +3, время: 19:56.