web前端原生开发基础（一）

最新推荐文章于 2024-05-12 05:54:01 发布

姜大大的博客

最新推荐文章于 2024-05-12 05:54:01 发布

阅读量855

点赞数 1

分类专栏： web开发文章标签： html

本文链接：https://blog.csdn.net/JIANGYINGH/article/details/115702181

版权

web开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1. 鼠标悬停练习

对页面元素的调用

<head>
<meta charset="UTF-8">
<title>鼠标提示框</title>
<style>
  #div1
  {
      width:200px;
      height:100px;
      background:#ccc;
      border:1px solid #999;/*边框*/
      display:none;/*不显示 */ 
  }
</style>
</head>
<body>
<!-- div1.style.display 拿到div1中的样式属性 -->
  <input type="checkbox" onmouseover="document.getElementById('div1').style.display='block'"
  onmouseout="document.getElementById('div1').style.display='none'" >
  <div id="div1"></div>
</body>
</html>

2.函数引用

引用function（）函数的基本形式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div变色变形</title>
<style>
  #div1
  {
      width:200px;
      height:100px;
      background:#ccc;
      border:1px solid #999;/*边框*/
  }
</style>
<script>
	function toRed(){
		  var oDiv = document.getElementById('div1');
		   oDiv.style.background = 'red';
		   oDiv.style.width='300px';
		   oDiv.style.height='200px';
	}
	function toGreen(){
		  var oDiv = document.getElementById('div1');
		   oDiv.style.background = 'green';
		   oDiv.style.width='100px';
		   oDiv.style.height='50px';  
	}
</script>
</head>
<body>
  <!-- 变红:红色，宽300，0高200px -->
  <input type= "button" value= "变红" onmouseover="toRed()">
  <!-- 变红:绿色，宽100，高50px -->
  <input type= "button" value= "变绿" onmouseover="toGreen()">
 <div id="div1"></div>
</body>
</html>

练习二外部样式表的使用

html中

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页换肤</title>
<link  id = 'li' rel="stylesheet" type = "text/css" href="css1.css"> 

<script>
   function skin1(){
	   var oLi = document.getElementById("li");
	   oLi.href= "css1.css";
   }
   function skin2(){
	   var oLi = document.getElementById("li");
	   oLi.href= "css2.css";
   }
</script>
</head>
<body>
    <input type="button" value = "开灯"  onclick="skin1()">
    <input type="button" value = "关灯"  onclick="skin2()">
</body>
</html>

css1

body{
	background:white;
}
input{
	width:200px;
	height:100px;
	background:pink;
}

css2

body{
	background:black;
}
input{
	width:200px;
	height:100px;
	background:yellow;
}

练习三 if判断

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IF</title>
<style>
 #div1{
  width:100px;
  height:200px;
  background:blue;
  display:block;
  border:1px solid #999;/*边框*/
 }
</style>
<script type="text/javascript">
function onclick1(){
	 console.log("button success！")
	var dis = document.getElementById("div1");
	 if(dis.style.display=='block'){
		 dis.style.display='none';
		
	 }
	 else{
		 dis.style.display='block';	
	 }
}
</script>
</head>
<body>
 <input type="button" value = "点击按钮" onclick="onclick1()">
 <div id="div1" > </div>
</body>
</html>

另一种方式–预加载

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IF</title>
<style>
 #div1{
  width:100px;
  height:200px;
  background:blue;
  display:block;
  border:1px solid #999;/*边框*/
 }
</style>
<script type="text/javascript">
//预加载body元素
window.onload=function(){
	var obtn = document.getElementById("btn1");
	obtn.onclick=onclick1;
	function onclick1(){
		var dis = document.getElementById("div1");
		 if(dis.style.display=='block'){
			 dis.style.display='none';
		 }
		 else{
			 dis.style.display='block';	
		 }
	}
}

</script>
</head>
<body>
 <input type="button" value = "点击按钮"  id="btn1">
 <div id="div1" > </div>
</body>
</html>

3 函数传参

  function setColor(color){
	  oDiv.style.background = color;
  }

姜大大的博客

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端原生开发基础（一）

1. 鼠标悬停练习对页面元素的调用<head><meta charset="UTF-8"><title>鼠标提示框</title><style> #div1 { width:200px; height:100px; background:#ccc; border:1px solid #999;/*边框*/ display:none;/*不显示 */ }</s
复制链接

扫一扫