使用Java脚本更改CSS元素

Question

Using javascript, I'm trying to change the background image of a div class when particular url params are entered. However it isn't switching the image in the background.

Example url:

 example.com?campaignid=street

The HTML

<div class="row-background-79134">
    <p>Some content here</p>
</div>

The script is here:

<script>
function getQueryParams(qs) {
    qs = qs.split('+').join(' ');
    var params = {},
        tokens,
        re = /[?&]?([^=]+)=([^&]*)/g;
    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    }
    return params;
}

var query = getQueryParams(document.location.search);
var myCampaign = query.campaignid;


if (myCampaign == "street"){
   var elems = document.getElementsByClassName('row-background-79134');
    for(var i = 0; i < elems.length; i++) {
    elems[i].style.background = 'url(https://example.com/image1.jpg) no-repeat center center;'
}

if (myCampaign == "plumber"){
   var elems = document.getElementsByClassName('row-background-79134');
for(var i = 0; i < elems.length; i++) {
elems[i].style.background = 'url(https://example.com/image2.jpg) no-repeat center center;'
}

if (myCampaign == "cowboy"){
   var elems = document.getElementsByClassName('row-background-79134');
    for(var i = 0; i < elems.length; i++) {
    elems[i].style.background = 'url(https://example.com/image3.jpg) no-repeat center center;'
}

if (myCampaign == "hairdresser"){
   var elems = document.getElementsByClassName('row-background-79134');
for(var i = 0; i < elems.length; i++) {
elems[i].style.background = 'url(https://example.com/image4.jpg) no-repeat center center;'
}

</script>

Any help on this would be great.

Answer 1

Each of these blocks

if (myCampaign == "street"){
   var elems = document.getElementsByClassName('row-background-79134');
    for(var i = 0; i < elems.length; i++) {
    elems[i].style.background = 'url(https://example.com/image1.jpg) no-repeat center center;'
}

Should be re-written with an extra brace, like this

if (myCampaign == "street"){
   var elems = document.getElementsByClassName('row-background-79134');
   for(var i = 0; i < elems.length; i++) {
       elems[i].style.background = 'url(https://example.com/image1.jpg) no-repeat center center;';
   } // added this
}

Also consider adding some logging. Use console.log to show you what's going on, and open your browser console to read the output. You probably want to know what the value of myCampaign is, for instance.

console.log(myCampaign);

will help, near the top. There are other ways to make the code a bit easier to read/maintain, but getting the braces right should be the first step.

Answer 2

Your code if statements are missing a closing bracket } . However, the major problem here is that your code is much larger than it should be, and is a redundant mess.

To fix this, it is a much better idea to store the campaign names and image values in a object, then have one if statement:

 //This would be the value you get from the URL, I've replaced it with a prompt for demo purposes var campaignName = prompt("campaign name? (leave blank for default)") || "street"; //Object containing a name/image pair for each of the campaigns var campaigns = { street: "image1.jpg", plumber: "image2.jpg", cowboy: "image3.jpg", hairdresser: "image4.jpg" }; //If a campaign with the name exists if (campaigns[campaignName]) { //Select elements by class name var elems = document.getElementsByClassName('row-background-79134'); //Loop through elements for (var i = 0; i < elems.length; i++) { //Since we have the other styles added with CSS, we only have to set the background-image elems[i].style.backgroundImage = 'url(https://example.com/' + campaigns[campaignName] + ')'; //Logging for demo purposes console.log("Added image to", elems[i]); } } 

 .row-background-79134 { background-repeat: no-repeat; background-position: center; } 

 <div class="row-background-79134"></div> <div class="row-background-79134"></div> <div class="row-background-79134"></div> <div class="row-background-79134"></div> 

Much cleaner, simpler, and easier to debug.

If you want to add a new campaign/image, just add it to the campaigns object:

var campaigns = {
  street: "image1.jpg",
  plumber: "image2.jpg",
  cowboy: "image3.jpg",
  hairdresser: "image4.jpg",
  chef: "image5.jpg",
};

Answer 3

Try this, There are syntax issues in your code. You did not close your brackets properly.

if (myCampaign == "street"){
   var elems = document.getElementsByClassName('row-background-79134');
   for(var i = 0; i < elems.length; i++) {
   elems[i].style.background = 'url(https://example.com/image1.jpg) no-repeat center center;'
   }
}

if (myCampaign == "plumber"){
   var elems = document.getElementsByClassName('row-background-79134');
    for(var i = 0; i < elems.length; i++) {
     elems[i].style.background = 'url(https://example.com/image2.jpg) no-repeat center center;'
    }
}

if (myCampaign == "cowboy"){
  var elems = document.getElementsByClassName('row-background-79134');
  for(var i = 0; i < elems.length; i++) {
  elems[i].style.background = 'url(https://example.com/image3.jpg) no-repeat center center;'
  }
}

if (myCampaign == "hairdresser"){
   var elems = document.getElementsByClassName('row-background-79134');
   for(var i = 0; i < elems.length; i++) {
     elems[i].style.background = 'url(https://example.com/image4.jpg) no-repeat center center;'
   }
}

Answer 4

In each if bracket, youre missing a "}" which should close this block. In addition to that, next to the background assignment you are missing a ";",

wrong:

if (myCampaign == "cowboy"){
  var elems = document.getElementsByClassName('row-background-79134');
  for(var i = 0; i < elems.length; i++) {
     elems[i].style.background = 'url(https://example.com/image3.jpg no-repeat center center;'
  }

right:

if (myCampaign == "cowboy"){
  var elems = document.getElementsByClassName('row-background-79134');
  for(var i = 0; i < elems.length; i++) {
     elems[i].style.background = 'url(https://example.com/image3.jpg no-repeat center center;';
  }
}

If you want to make your current code shorter, use jQuery.

JavaScript:

var elems = document.getElementsByClassName('row-background-79134');
for(var i = 0; i < elems.length; i++) {
 elems[i].style.background = 'url(https://example.com/image4.jpg) no-repeat center center;';
}

jQuery

$(".row-background-79134").css("background","url('https://example.com/image4.jpg') no-repeat center center");