2014-02-01 2 views
12

это мой кодКак изменить фоновое изображение div с помощью javascript?

 <div style="text-align:center;"> 
      <div class="ghor" id="a" onclick="chek_mark()"> 
      </div> 

вызов функции

 <script type="text/javascript"> 

      function chek_mark(){ 
       var el= document.getElementById("a").style.background- image; 

здесь я хочу, чтобы изменить фоновое изображение, используя, если другое условие

if (el.url("Black-Wallpaper.jpg")) 
        {         
         el.url = "cross1.png"; 
        } 
        else if(el.url("cross1.png")) 
        { 

         alert("<h1>This is working too.</h1>"); 
        } 
       } 

это стиль листов

.ghor //this is the div class 
{ 
    background-image: url('Black-Wallpaper.jpg'); 
    background-size: cover; 
    border-radius: 5px; 
    height: 100px; 
    width: 100px; 
    box-shadow: 2px 5px 7px 7px white; 
    /*background-color: black;*/ 
    display:inline-block; 
} 

я хочу изменить фоновое изображение 'DIV', какой класс 'Ghor'

ответ

18

Попробуйте это:

document.getElementById('a').style.backgroundImage="url(images/img.jpg)"; // specify the image path here 

Надеется, что это помогает!

4

попробуйте этот!

var el = document.getElementById("a").style.backgroundImage; 
if(el == "url(Black-Wallpaper.jpg)") { // full value is provided 
    el.style.backgroundImage = "url(/link/to_new_file.png)"; // change it 
} 
+1

Будет ли это получить только имя файла, или он будет также получить путь? – Avisari

+0

@Avisari, он получит значение свойства css 'background-image'. Если указан путь к файлу, его значение также будет содержать путь к файлу. Иначе только изображение! –

+0

'(/link/to_new_file.png)' что мне здесь писать – shajib0o

1

Вы можете сделать это следующими способами

ШАГ 1

var imageUrl= "URL OF THE IMAGE HERE"; 
    var BackgroundColor="RED"; // what ever color you want 

Для изменения фона в ТЕЛА

document.body.style.backgroundImage=imageUrl //changing bg image 
document.body.style.backgroundColor=BackgroundColor //changing bg color 

Ча Нге элемент с ID

document.getElementById("ElementId").style.backgroundImage=imageUrl 
document.getElementById("ElementId").style.backgroundColor=BackgroundColor 

для элементов с одинаковым классом

var elements = document.getElementsByClassName("ClassName") 
     for (var i = 0; i < elements.length; i++) { 
      elements[i].style.background=imageUrl; 
     } 
Смежные вопросы