document.querySelect in body

Navigation
3

How to use the code session document.querySelector to change / change the background image of a page <body>...</body>

Ex: 

var imagem_lista = [
    "http://static.gamespot.com/uploads/original/1179/11799911/2324138-warface11.jpg",
    "http://glasshome.tv/wp-content/uploads/2013/10/Warface_Screenshot019_Climb.jpg",
    "http://hq.warface.com/updates/endless-skies/img/WF_ES_019.jpg",
    "http://lodik.ru/uploads/posts/2015-02/1423304948_warface-3.jpg",
    "http://hq.warface.com/updates/siberia/img/wf-update-coldpeak-03.jpg",
    "http://vignette1.wikia.nocookie.net/warface/images/4/43/Warface_WeapCustom_Combat_201.jpg/revision/latest?cb=20130301001625"
];

window.onload=function(){
    var url_pagina = window.location.href;
    if(!url_pagina.indexOf('/p/')){
        var numero_aleatorio = random_number(0, imagem_lista.lenght);
        mudar_imagem(imagem_lista[numero_aleatorio]);
    }
}

function random_number(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function mudar_imagem(image){

  // usar este 
    document.querySelector('body').style.background-image=image;
  // ou este
    $('body').css('background-image', 'url(' + image + ')');
}

And one of the error is as follows:

Uncaught ReferenceError: Invalid left-hand side in assignment 

Uncaught ReferenceError: imagem_lista is not defined
    at :2:7
    at Object.InjectedScript._evaluateOn (:905:140)
    at Object.InjectedScript._evaluateAndWrap (:838:34)
    at Object.InjectedScript.evaluate (:694:21)

NOTE: The file containing the script is hosted on:

link

In the line: indexOf

I want to identify when a user accesses my blog to change the background of the image according to a defined theme.

Ex: The blog home is set to one of these images in imagem_lista . ( link )

Now for example on the survival mode page of the game quoted there, the theme should soon change the background as well. ( link )

    
asked by anonymous 29.07.2015 / 23:10

1 answer

1

Problem with hyphens

This is wrong : 

document.querySelector('body').style.background-image=image;

Note that the error

  

Uncaught ReferenceError: Invalid left-hand side in assignment

It is caused by the use of .background-image

Hyphens are used for operations in javascript and lack url(...) , to set background-image you should do so: 

document.querySelector('body').style.backgroundImage = 'url(' + image + ')';

Note that backgroundImage uses I in the uppercase, if it was font-size, it would get the uppercase S: 

document.querySelector('body').style.fontSize

Then for each hyphen the next letter is in the upper case, this rule does not apply to the prefixes -webkit , -moz and -o , for example -webkit-filter should look like this: 

document.querySelector('body').style.webkitFilter

However if you're using jquery (which seems to be the case), then apply with: 

$('body').css('background-image', 'url(' + image + ')');

Other errors

Another problem is that you wrote imagem_lista.lenght , but lenght does not exist the correct is length .

Problem with indexOf

indexOf is not returning data of type true or false

  • It returns 0 or more when it finds the string
  • Returns -1 when it does not find

Then the correct one would be: 

//Se não tiver /p/ na url
if(-1 === url_pagina.indexOf('/p/')){
    var numero_aleatorio = random_number(0, imagem_lista.length);
    mudar_imagem(imagem_lista[numero_aleatorio]);
}

If you want to change the background when you find /p/ in the url use this: 

//Se tiver /p/ na url
if(-1 !== url_pagina.indexOf('/p/')){
    var numero_aleatorio = random_number(0, imagem_lista.length);
    mudar_imagem(imagem_lista[numero_aleatorio]);
}
    
29.07.2015 / 23:20
Run a video in html5 in full screen Check words in Array php