使用Javascript更改CSS元素

使用javascript，我试图在输入特定url参数时更改div类的背景图像。但是，它不会切换背景中的图像

示例url：

 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>

函数getQueryParams（qs）{
qs=qs.split（+）.join（“”）；
var params={}，
代币，
re=/[？&]？（[^=]+）=（[^&]*）/g；
while（tokens=re.exec（qs））{
参数[decodeURIComponent（令牌[1]）]=decodeURIComponent（令牌[2]）；
}
返回参数；
}
var query=getQueryParams（document.location.search）；
var myCampaign=query.campaiid；
如果（myCampaign==“街道”）{
var elems=document.getElementsByClassName（'row-background-79134'）；
对于（变量i=0；i

---

这方面的任何帮助都将非常有用。

试试看，代码中存在语法问题。您没有正确地关闭括号

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

if（myCampaign==“street”）{
var elems=document.getElementsByClassName（'row-background-79134'）；
对于（变量i=0；i

试试看，您的代码中有语法问题。您没有正确地关闭括号

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

if（myCampaign==“street”）{
var elems=document.getElementsByClassName（'row-background-79134'）；
对于（变量i=0；i

这些块中的每一个

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

---

将有帮助，靠近顶部。还有其他方法可以使代码更易于阅读/维护，但正确使用大括号应该是第一步。

在每个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括号中，您缺少一个“}”，该“}”应关闭此块。除此之外，在后台赋值旁边，您缺少一个“；”

错：

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

语句：

//这将是您从URL获得的值，为了演示，我已将其替换为一个提示符
var campaigname=prompt（“活动名称？（默认为空）”）| |“街道”；
//对象，该对象包含每个活动的名称/图像对
风险值={
街道：“image1.jpg”，
水管工：“image2.jpg”，
牛仔：“image3.jpg”，
美发师：“image4.jpg”
};
//如果存在名称为的活动
如果（活动[活动名称]）{
//按类名选择元素
var elems=document.getElementsByClassName（'row-background-79134'）；
//循环通过元素
对于（变量i=0；i

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