Javascript 使用ul中的图像单击更改车身背景图像_Javascript_Html_Css_Buttonclick

Javascript 使用ul中的图像单击更改车身背景图像

javascript html css

Javascript 使用ul中的图像单击更改车身背景图像,javascript,html,css,buttonclick,Javascript,Html,Css,Buttonclick,我想得到一个定义了背景图像的身体，并能够选择从ul到我想改变的背景（例如：汽车，狗，房子…）正文{ 宽度：1200px；高度：907px；背景图片：url（“fotos/cc.png”）；背景重复：无重复；背景大小：100%100%； } 1. 2. 3. 4. 如果我正确理解您的意思，那么您想根据右侧标签中选择的内容更改身体的背景图像吗如果是这样，那么可以通过javascript和switch语句（如下所示）或者通过将select标记中的选项上的值设置为字符串并使用该值作为背景图像

我想得到一个定义了背景图像的身体，并能够选择从ul到我想改变的背景（例如：汽车，狗，房子…）

正文{
宽度：1200px；
高度：907px；
背景图片：url（“fotos/cc.png”）；
背景重复：无重复；
背景大小：100%100%；
}
1.
2.
3.
4.

如果我正确理解您的意思，那么您想根据右侧标签中选择的内容更改身体的背景图像吗

如果是这样，那么可以通过javascript和switch语句（如下所示）或者通过将select标记中的选项上的值设置为字符串并使用该值作为背景图像来实现。第一种方式如下所示：

功能更改背景（选择选项）{
var imgSRC=“”；
开关（selectedOption.value）{
案例“0”：
imgSRC=“dog.png”；
打破
案例“1”：
imgSRC=“cat.png”；
打破
案例“2”：
imgSRC=“house.png”；
打破
违约：
imgSRC=“default.png”；
打破
}
document.body.style.backgroundImage=“url（“+imgSRC+”）”；
}


0
1.
2.
3.
4.

您没有明确指定要对select标记执行的操作。不过，据我所知，您希望在选项更改时更改背景图像。eventHandler正在调用未创建的函数。我已经通过JQuery调用了onchange事件来存储下面代码中所选选项值的背景图像

var body=document.getElementById（'body'）；
var select=document.getElementById（'borde'）；
$（'select[name=select1]'）。在（'change'，function（）上{
body.style.backgroundImage=String（'url（'+select.children[select.selectedIndex].getAttribute（'value'）+'））
})

正文{
宽度：1200px；
高度：907px；
背景图像：url（“http://cdn3.megarush.net/wp-content/uploads/2013/01/search-engine-friendly-urls.jpg");
背景重复：无重复；
背景大小：100%100%；
}


违约
1.
2.
3.
4.

…你的问题是？函数

encender（）中的代码在哪里？

？是的，我解释得很糟糕，但这正是我想要的，谢谢你抽出时间，很抱歉我解释得不好。令人困惑的是，您提到了“ul”，但代码中没有

ul

，而

onchange

事件正在调用未声明的

encender（）

函数。请务必在发布前重新阅读您的问题。

body {
    width:1200px;
    height:907px;
    background-image: url("fotos/cc.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

<body>          
<select id="borde" onchange="encender();" name="select1">
            <option value="0" selected="selected"></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
</body>