[英]how to change the background image of div using javascript?
这是我的代码
<div style="text-align:center;">
<div class="ghor" id="a" onclick="chek_mark()"></div>
function call
</div>
<script type="text/javascript">
function chek_mark(){
var el= document.getElementById("a").style.background-image;
if (el.url("Black-Wallpaper.jpg"))
{
el.url = "cross1.png";
}
else if(el.url("cross1.png"))
{
alert("<h1>This is working too.</h1>");
}
}
</script>
在这里，我想使用 if else 条件更改背景图像
this is the style-sheet
.ghor //this is the div class
{
background-image: url('Black-Wallpaper.jpg');
background-size: cover;
border-radius: 5px;
height: 100px;
width: 100px;
box-shadow: 2px 5px 7px 7px white;
/*background-color: black;*/
display:inline-block;
}
我想更改 class 为 'ghor' 的 'div' 的背景图像
尝试这个：
document.getElementById('a').style.backgroundImage="url(images/img.jpg)"; // specify the image path here
希望能帮助到你！
试试这个！
var el = document.getElementById("a").style.backgroundImage;
if(el == "url(Black-Wallpaper.jpg)") { // full value is provided
el.style.backgroundImage = "url(/link/to_new_file.png)"; // change it
}
您可以通过以下方式进行
步骤1
var imageUrl= "URL OF THE IMAGE HERE";
var BackgroundColor="RED"; // what ever color you want
用于改变BODY的背景
document.body.style.backgroundImage=imageUrl //changing bg image
document.body.style.backgroundColor=BackgroundColor //changing bg color
更改具有 ID 的元素
document.getElementById("ElementId").style.backgroundImage=imageUrl
document.getElementById("ElementId").style.backgroundColor=BackgroundColor
对于具有相同类的元素
var elements = document.getElementsByClassName("ClassName")
for (var i = 0; i < elements.length; i++) {
elements[i].style.background=imageUrl;
}
<body id="body">
</body>
你也可以设置时间。
//Initializing
var i = 0;
var images = []; //array
var time = 3000; // time in millie seconds
//images
images[0] = "url(./Images/1.jpg)";
images[1] = "url(./Images/2.jpg)";
images[2] = "url(./Images/3.jpg)";
//function
function changeImage() {
var el = document.getElementById('body');
el.style.backgroundImage = images[i];
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
setTimeout('changeImage()', time);
}
window.onload = changeImage;
overflow-x: hidden;
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: center;
//Here is an example how to change background image of <div> element using javascript by feching a new URL form some API. // let image teched from API: this is the image you want to put as new background ! // thumbnail image: // data.picture.thumbnail //the HTML element whose background needs to be changes is given an id of #thumbnail. var thumbUrl = document.querySelector("#thumbnail"); //using a function which will update data in the HTML - this is done //after parsing of the data fetched, I have omitted the steps used for parsing the data. function updateData(data){ //data.picture.medium represents our new fetched data containing the URL fo the new image we want to use as background image. var newImage=data.picture.medium; thumbUrl.style.backgroundImage="url("+newImage+")"; }
//这里是一个示例，如何通过从某个 API 获取新 URL 来使用 javascript 更改元素的背景图像。
// 让图像从 API 获取：这是您要放置为新背景的图像！
// 缩略图：
// 数据.图片.缩略图
//需要更改背景的 HTML 元素的 id 为#thumbnail。
var thumbUrl = document.querySelector("#thumbnail");
//使用将更新 HTML 中的数据的函数 - 完成
//解析获取的数据后，我省略了解析数据的步骤。
function updateData(data){
//data.picture.medium represents our new fetched data containing the URL fo the new image we want to use as background image.
var newImage=data.picture.medium;
thumbUrl.style.backgroundImage="url("+newImage+")";
}
你可以这样做
背景图片: url(${musics[0].image})
兄弟我也出现了同样的问题。 然后我意识到当元素的 position 是固定的或绝对的时，javascript 无法正常工作。尝试将其 position 更改为相对属性或删除 Z4757FE07FD492A。
你可以用 Jquery 做到这一点
$('#div_id').css("backgroundImage","url(img_path)");
如何使用javascript使用select标签更改div的背景图像？
[英]How to change background image of div with select tag, using javascript?
如何使用纯JavaScript动态更改div的背景图像
[英]How to dynamically change a background image of a div using pure javascript
Javascript - 如何使用 css 和 JS 更改特定的 div 背景图像
[英]Javascript - how to change specific div background image using css and JS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.