使用Java腳本更改CSS元素

Question

使用javascript，當輸入特定的URL參數時，我試圖更改div類的背景圖像。 但是，它不會在后台切換圖像。

網址示例：

 example.com?campaignid=street

HTML

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

腳本在這里：

<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>

任何幫助都會很棒。

Answer 1

這些塊中的每一個

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 == "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
}

還可以考慮添加一些日志記錄。 使用console.log顯示發生了什么，然后打開瀏覽器控制台以讀取輸出。 例如，您可能想知道myCampaign的值是什么。

console.log(myCampaign);

在頂部附近會有所幫助。 還有其他方法可以使代碼更易於閱讀/維護，但是正確使用括號應該是第一步。

Answer 2

您的代碼if語句缺少右括號} 。 但是，這里的主要問題是您的代碼比應有的要大得多，並且是一團糟。

要解決此問題，最好將廣告系列名稱和圖像值存儲在一個對象中，然后使用一個 if語句：

 //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> 

更干凈，更簡單，更容易調試。

如果要添加新的廣告系列/圖像，只需將其添加到Campaigns對象：

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

Answer 3

試試這個，您的代碼中有語法問題。 您沒有正確合上括號。

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

在每個if括號中，您都缺少一個“}”，應將其關閉。 除此之外，在背景分配旁邊您還缺少“;”，

錯誤：

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 == "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;';
  }
}

如果要縮短當前代碼，請使用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");