JavaScript 实现简单的点击切换背景

最新推荐文章于 2024-05-16 10:12:55 发布
最新推荐文章于 2024-05-16 10:12:55 发布
阅读量867 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cyanciel/article/details/53896735
版权 
<!DOCTYPE html>
<html>
	<head>
		<title>点击换肤</title>
		<meta charset="utf-8" />
		<link id="skin" rel="stylesheet" type="text/css" href="02-purple.css">
	</head>
	<body>
		<button οnclick="toPink();">粉色</button>
		<button οnclick="toCyan();">青色</button>
	</body>
	<script>
		function toPink()
		{
			//要改谁 就找到那个对象
			document.getElementById('skin').href="02-pink.css";
		}		
		function toCyan()
		{
			document.getElementById('skin').href="02-cyan.css";
		}
	</script>
</html>



附：简单的css代码：
body {
	background-color:purple;
}


其他的css也是类似的。









                

        

        

    

  


    

      

        

            

              
                
                  ttcyan
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
JavaScript实现的简单Tab点击切换功能示例

				
			

			

				

					10-18
				

			

		

		

			
				
在这个示例中，我们将讨论如何使用JavaScript实现一个简单的Tab点击切换功能。这个功能涉及到JavaScript事件响应和页面元素属性的动态操作。  首先，HTML部分创建了一个包含两个分组的结构：一个头部（.hd）和一个...

			
		

	



                

              
                



	

		

			

				
					
前端百度换肤案例

				
			

			

				

					weixin_46002223的博客
				

				

					08-28
					
					600
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            .

			
		

	



                


  
              

                


	

		

			

				
					
页面换肤：给4个小图片利用循环注册点击事件，当我们点击了这个小图片时，让页面背景改为当前的图片。

				
			

			

				

					Lou__Lan的博客
				

				

					10-29
					
					240
					
				

			

		

		

			
				
页面换肤：给4个小图片利用循环注册点击事件，当我们点击了这个小图片时，让页面背景改为当前的图片。

			
		

	





	

		

			

				
					
js 点击切换背景图片

				
			

			

				

					weixin_35757191的博客
				

				

					02-15
					
					1639
					
				

			

		

		

			
				
您好，要使用JavaScript实现点击切换背景图片，可以按照以下步骤进行：

在HTML中，为需要切换背景图片的元素添加一个id属性，比如id="bg-img"。
在JavaScript中，使用document.getElementById()方法获取该元素。
定义一个数组，里面存放需要切换的背景图片的URL地址。
使用addEventListener()方法为元素添加一个点击事件，当用户点击该...

			
		

	



		

			
		



	

		

			

				
					
js 点击tab栏切换背景，同时变更背景图片

				
			

			

				

					qq_61320547的博客
				

				

					07-24
					
					447
					
				

			

		

		

			
				
【代码】js 点击tab栏切换背景，同时变更背景图片。

			
		

	





	

		

			

				
					
JavaScript点击背景图片切换

				
			

			

				

					weixin_67107650的博客
				

				

					03-28
					
					5319
					
				

			

		

		

			
				
本文献这次讲的是JavaScript背景图片切换，这次案列会用一个事件委派属性。

1.首先可以先给主页界面放一张图片，让打开网页就显示到一张图片出来，这里我放的是下面第三张图片。











2.然后把html的div图片框架打出来，一个div标签里面包裹了四个img标签，给div一个id，下面获取id的时候需要。





3.再给四个img标签打一下样式，能把效果显示的好看一点。









4.开始获取前面的id，先写一个window.onload页面加载事件，然后里面获取一下...

			
		

	





	

		

			

				
					
js实现点击切换checkbox背景图片的简单实例

				
			

			

				

					10-19
				

			

		

		

			
				
本文主要介绍了使用JavaScript实现点击切换复选框（checkbox）背景图片的方法。知识点包括HTML中复选框的基本使用，CSS样式设置，以及JavaScript对于DOM元素操作和事件处理的具体实现。  首先，HTML中复选框是一个...

			
		

	





	

		

			

				
					
javascript实现点击按钮切换图片

				
			

			

				

					12-06
				

			

		

		

			
				
本文将详细解析如何通过JavaScript实现这个功能。  首先，我们需要创建HTML结构，包括一个包含图片的`<div>`容器、一个用于显示图片描述的`<p>`元素以及两个用于切换图片的按钮。以下是基本的HTML代码：  ```html   ...

			
		

	





	

		

			

				
					
JavaScript实现tab栏切换效果

				
			

			

				

					10-15
				

			

		

		

			
				
这个简单的 JavaScript 实现依赖于元素的索引和类名的管理，使得用户可以通过点击 Tab 标签轻松切换页面内容。这种功能在很多网页应用中都很常见，例如产品介绍、用户设置、数据统计等场景。  总的来说，这个示例...

			
		

	





	

		

			

				
					
jquery点击切换背景色的简单实例

				
			

			

				

					10-21
				

			

		

		

			
				
通过这个实例，前端开发者可以了解到如何利用jQuery来实现简单的交互动效，这不仅可以提升用户体验，也可以为Web界面设计增添更多可能性。同时，这个例子也展示了一种常见的JavaScript事件处理模式，即为页面元素...

			
		

	





	

		

			

				
					
Js实现背景图片切换

				
			

			

				

					wuliao193728645的博客
				

				

					04-10
					
					6706
					
				

			

		

		

			
				
实现目标：

点击页面中间的小图片，页面的背景就会变成相应的图片样式



思路

点击图片，获取到对应的图片的li元素

因为图片的名字是从1开始顺序命名的，所以可以通过获取的li元素的索引号来改变背景图片的地址名

将地址名改到body标签的backgroundImage属性中

实现代码

html代码







Css代码







Js代码




...

			
		

	





	

		

			

				
					
JS点击切换背景

				
			

			

				

					qq_52006379的博客
				

				

					08-26
					
					348
					
				

			

		

		

			
				
JS点击切换背景。

			
		

	





	

		

			

				
					
JavaScript点击按钮切换图片实例

					
最新发布

				
			

			

				

					猿码互联
				

				

					05-16
					
					1250
					
				

			

		

		

			
				
属性来切换图片，方法二通过切换图片元素的 CSS 类来改变图片的样式。你可以根据自己的需求选择适合的方法来实现切换图片的效果。有多种方法可以使用 JavaScript 点击按钮切换图片。方法二：通过切换 CSS 类来改变图片的样式，使用多张图片的背景图来实现切换效果。方法一：使用一个数组保存多张图片的源文件，通过改变图片元素的。方法一通过改变图片元素的。在这两种方法中，我们通过点击按钮调用。函数被调用，并检查当前图片的源文件是。来改变图片的源文件。在这个示例中，我们使用。，然后进行相应的切换。

			
		

	





	

		

			

				
					
JavaScript实现更换背景图片

				
			

			

				

					syy的博客
				

				

					10-30
					
					5828
					
				

			

		

		

			
				
js实现更换网页背景图片

			
		

	





	

		

			

				
					
通过使用简单的JavaScript的效果实现点击图片背景图片更换的效果

				
			

			

				

					小杨的博客
				

				

					07-04
					
					3013
					
				

			

		

		

			
				
本文实例为大家分享了JavaScript实现更换背景图片的具体代码，供大家参考，具体内容如下
主要通过Js控制行内样式，达到更换背景图片的目的

			
		

	





	

		

			

				
					
JS 使用节点的方式实现切换背景图片

				
			

			

				

					夏沐的博客
				

				

					01-21
					
					3405
					
				

			

		

		

			
				

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;style&gt;
    * {
      margin: 0px;
      padding: 0p

			
		

	





	

		

			

				
					
javascript更换背景

				
			

			

				

					dre的博客
				

				

					03-17
					
					1万+
					
				

			

		

		

			
				
使用JS更换背景图是遇到的问题。css的background的参数问题

			
		

	





	

		

			

				
					
js实现点击按钮变换背景颜色

					
热门推荐

				
			

			

				

					sweetyhyh的博客
				

				

					05-28
					
					2万+
					
				

			

		

		

			
				
js实现点击按钮变换背景颜色

function aa(){
document.bgColor="Orange";
}


function change(c){
document.bgColor=c;
}

			
		

	





	

		

			

				
					
JavaScript实现动态换肤：点击切换页面背景

				
			

			

				

					
				

			

		

		

			
				
本文主要介绍了如何使用JavaScript实现一个简单的换肤效果，即通过点击页面上的不同图片来动态更换页面背景。以下是实现这一功能的具体步骤和技术要点：  1. 背景图片的准备：  首先，定义一组图片，每个图片的`src`...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值