需求，现在要求两个按钮，点击1，背景为红色，点击2，背景为黄色

*****html代码
——————————————————————————————————————————————————
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>changzhecolour</title>
    <!--通过外链引入css表单，id标记此link属性-->
    <link rel="stylesheet" type="text/css" href="css1.css" id="link"/>
</head>
<body>
<!--定义一块区域，放入两个按钮-->
<div id="div">
    <input id="d1" type="button" value="换成红色"/>
    <input id="d2" type="button" value="换成黄色"/>
</div>
<script>
    <!--lk这个变量代表了外链的内容，通过id=link这个链接。d1变量则是代表了id="d1"这个标签的内容，就是换成红色这个button-->
    var lk = document.getElementById("link");
    var d1 = document.getElementById("d1");
    var d2 = document.getElementById("d2");
//    换成红色这个button的onclick属性 ,也就是发生在d1上的onclick事件，让lk变量代表的link改变了路径，进而改变div背景
    d1.onclick = function () {
        lk.href= "css2.css"

    };
    d2.onclick = function () {
        lk.href= "css1.css"

    };

</script>
</body>
</html>

————————————————————————————
****css1.css 代码
————————————————————————————
#div {
    width:800px;
    height: 800px;
    background: yellow;
}
#d1{
    width: 80px;
    height: 30px;
    margin: 20px 50px 0px;

}
#d2{
    width: 80px;
    height: 30px;
    margin: 20px 50px 0px;

}
——————————————————————————————————————————
￥￥￥￥￥ css2.css 代码
——————————————————————————————————————————
#div {
    width:300px;
    height: 300px;
    background: red;
}
#d1{
    width: 80px;
    height: 30px;
    margin: 20px 50px 0px;

}
#d2{
    width: 80px;
    height: 30px;
    margin: 20px 50px 0px;

}
												


											
js俩习题的更多相关文章
	

    
								
  1. JS答辩习题
		
    php高中班javascript答辩题目 1 什么是javascript?  答:Javascript是一种专门设计用来增强网页交互性的脚本语言,它也是一种解释型语言. 2 Javascript与C语 ...
    
		
    2. 
						
  2. Java进击C#——应用开发之Asp.net
		
    本章简言 上一章中笔者讲到关于Linq和EF的用法.并以hibernate来进行讲解.那么本章笔者来讲一下C#的Asp.Net.即是在B/S模式下开发.现在企业大部分的业务都是面向B/S模式的.所以对 ...
    
		
    3. 
						
  3. ReactJS入门（一）—— 初步认识React
		
    React刚开始红的时候,由于对其不甚了解,觉得JSX的写法略非主流,故一直没打算将其应用在项目上,随着身边大神们的科普,才后知后觉是个好东西. 好在哪里呢?个人拙见,有俩点: 1. 虚拟DOM —— ...
    
		
    4. 
						
  4. ajax模拟获取json
		
    现在工作中我用到获取数据的方式,基本都是ajax.前台获取后端的数据后,需要进行处理,然后把他们放进页面中的相应标签里.下面举一个简单的例子,来模拟数据的获取和摆放. 这里用ng框架获取数据然后处理, ...
    
		
    5. 
						
  5. 应用开发之Asp.net
		
    本章简言 上一章中笔者讲到关于Linq和EF的用法.并以hibernate来进行讲解.那么本章笔者来讲一下C#的Asp.Net.即是在B/S模式下开发.现在企业大部分的业务都是面向B/S模式的.所以对 ...
    
		
    6. 
						
  6. React学习之redux
		
    在阅读本文之前,希望大家对以下知识点能提前有所了解并且上好厕所(文章有点长): 状态提升的概念 react高阶组件(函数) es6基础 pure 组件(纯函数) Dumb 组件 React.js的co ...
    
		
    7. 
						
  7. 微信小程序获取多个input和textarea的值（es6加微信小程序APi）
		
    wxml js 俩行即可解决,money1,money2,money3
    
		
    8. 
						
  8. 记一次Jquery学习引发的学习思考
		
    学习廖雪峰Jquery的教程关于表单的操作时,被最后的习题给困住了,在一番思索后无奈地决定去看博客评论下的答案,却发现自己看不懂,遂以为是对Jquery的了解还不够深,于是便在网上疯狂搜索关于Jque ...
    
		
    9. 
						
  9. 1组-Alpha冲刺-5/6
		
    一.基本情况 队名:震震带着六菜鸟 组长博客:https://www.cnblogs.com/Klein-Wang/p/15564206.html 小组人数:7人 二.冲刺概况汇报 王业震 过去两天完 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Marriage Match II 【HDU - 3081】【并查集+二分答案+最大流】
			
    题目链接 一开始是想不断的把边插进去,然后再去考虑我们每次都加进去边权为1的边,直到跑到第几次就没法继续跑下去的这样的思路,果不其然的T了. 然后,就是想办法咯,就想到了二分答案. 首先,我们一开始处 ...
    
			
    2. 
						
  2. ELK+Filebeat (2)
			
    ELK+Filebeat收集多台机器不同日志 采坑:在使用了6.0版本的ELK以后,使用如上配置,if [type]匹配不到在filebeat里面使用document_type定义的字符串.在多次调试 ...
    
			
    3. 
						
  3. SAP选择屏幕开发（二）(转)
			
    原文链接:https://blog.csdn.net/wtxhai/article/details/90698683 1.2.SAP屏幕框架的创建        SAP页面设计中的框架不但可以保证SA ...
    
			
    4. 
						
  4. 探究activity-android学习第三天
			
    转载来源:https://www.jianshu.com/p/f8c68b3c2847?utm_campaign=maleskine&utm_content=note&utm_medi ...
    
			
    5. 
						
  5. seaborn教程3——数据集的分布可视化
			
    原文转载:https://segmentfault.com/a/1190000015006667 Seaborn学习大纲 seaborn的学习内容主要包含以下几个部分: 风格管理 绘图风格设置 颜色风 ...
    
			
    6. 
						
  6. bzoj1897. tank 坦克游戏（决策单调性分治）
			
    题目描述 有这样一款新的坦克游戏.在游戏中,你将操纵一辆坦克,在一个N×M的区域中完成一项任务.在此的区域中,将会有许多可攻击的目标,而你每摧毁这样的一个目标,就将获得与目标价值相等的分数.只有获得了 ...
    
			
    7. 
						
  7. python车牌精确定位
			
    #coding=utf-8 import cv2 # 使用的是HyperLPR已经训练好了的分类器 watch_cascade = cv2.CascadeClassifier('model/casca ...
    
			
    8. 
						
  8. shell函数的结束与返回值
			
    
			
    9. 
						
  9. Git--01  基础 - 远程仓库的使用
			
    目录 Git 基础 - 远程仓库的使用 远程仓库的使用 查看远程仓库 添加远程仓库 从远程仓库中抓取与拉取 推送到远程仓库 查看某个远程仓库 远程仓库的移除与重命名 Git 基础 - 远程仓库的使用  ...
    
			
    10. 
						
  10. spring启动图案修改（纯属好玩）
			
    在resource目录下新建banner.txt(与application.properties或者application.yml同级) 在里面随便写自己的汉字图案就行了,比如我的: _ooOoo_  ...
    
			
    11.