div动态设置背景图遇到的火狐和谷歌浏览器兼容问题

最新推荐文章于 2023-04-11 21:19:09 发布

天机浮现

最新推荐文章于 2023-04-11 21:19:09 发布

阅读量3k

点赞数 1

本文链接：https://blog.csdn.net/lovejavaloveworld/article/details/52796591

版权

1.最终期望效果如下,输入车号,点击查找,对应机械车闪烁展示

2.前台的展示div是在后台生成的,通过定时调用切换div的背景效果,切换代码如下

function showFixed(id){			
	var glintDiv = document.getElementById(id);		
	var style = glintDiv.style;
	divbg = style.background;	
	timer  = setInterval(function(){
		flashit();
	},500);	
}

function flashit(id,bg){ 
	x++;
	var g = document.getElementById(divid);
	if(x%2 == 0){
		g.style.borderColor="red" ;
		g.style.background=divbg ;
		
	}else{
		g.style.borderColor="yellow" ;
		g.style.background="#00FFFF" ;
	}
}

3.谷歌浏览器测试没有问题,用火狐测试发现闪烁时不能展示原来的图片,调试发现火狐下,取不到背景参数

divbg = style.background;//火狐下divbg='',谷歌下divbg是创建的div中对应的背景样式

4.火狐下调试发现如下,因此如果要兼容火狐浏览器动态切换背景,还需要单独编写代码实现

5.最终代码如下

function showFixed(id){			
	var glintDiv = document.getElementById(id);		
	var style = glintDiv.style;
	divbg = style.background;

        divimg = style.backgroundImage;<span style="white-space:pre">	</span>	
	timer  = setInterval(function(){
		flashit();
	},500);	
}

function flashit(id,bg){ 
	x++;
	var g = document.getElementById(divid);
	if(x%2 == 0){
		g.style.borderColor="red" ;
<span style="white-space:pre">		</span>g.style.background=divbg ;
<span style="white-space:pre">		</span>g.style.backgroundImage=divimg;
<span style="white-space:pre">		</span>g.style.backgroundSize="100% 100%";
<span style="white-space:pre">		</span>g.style.backgroundRepeat="repeat, no-repeat";
		
	}else{
		g.style.borderColor="yellow" ;
		g.style.background="#00FFFF" ;
	}
}