JavaScrip初探

最新推荐文章于 2021-12-10 13:41:34 发布

Hermioneee_

最新推荐文章于 2021-12-10 13:41:34 发布

阅读量99

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/qq_36936831/article/details/107189236

版权

JavaScrip初探

鼠标提示框

事件：用户的操作
-样式：div的display
-事件：onmouseover，onmouseout
onclick="alert('点击后弹出的文字');" 当按钮被点击时
在这里插入图片描述
<input type="checkbox" onmouseover="alert('a')">当鼠标移入触发onmouseover效果移出触发onmouseout效果

div1显示/隐藏

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<style>
		#div1{
			width: 200px;
			height: 100px;
			background-color: #ccc;
			border: 1px solid #999;
			display: none;    /*一开始看不见div*/
		}
	</style>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<input type="checkbox" onmouseover="div1.style.display='block';" onmouseout="div1.style.display='none';">
	
	<div id="div1">
		为了您的信息安全。
	</div>
</body>		       
</html>

在这里插入图片描述
.叫做“的”
div1的style的display赋值block

***在低版本浏览器要加上document.getElementById('调用的名字')

var定义变量（去一个别名）
var oDiv = document.getElementById('div1'); 可以用oDiv来代替后面的东西

在<scrpit>中定义函数
HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<style>
		#div1{
			width: 200px;
			height: 200px;
			background-color: red;
			
		}
	</style>
	<script>		/*在里面定义函数*/
		function toGreen(){
			div1.style.width='300px';
			div1.style.height='300px';
			div1.style.background='green';
		}
		function toRed(){
			div1.style.height='200px';
			div1.style.width='200px';
			div1.style.background='red';
		}
	</script>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<div id="div1" onmouseover="toGreen()" onmouseout="toRed()">

	</div>
</body>		       
</html>

调用函数可以直接进行定义
鼠标不放置
在这里插入图片描述
放置鼠标

换肤
HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<style>
	
	</style>

	<link id="l1" rel="stylesheet" type="text/css" href="new 1.css">	
	<script>	/*在里面定义函数*/
		function skin1(){
			l1.href='new 1.css';
		}
		function skin2(){
			l1.href='new 2.css';
		}
	</script>
</head>
<body>
	<input type="button" value="皮肤1" onclick="skin1()">
	<input type="button" value="皮肤2" onclick="skin2()">
</body>		       
</html>

CSS1:

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: black;
}
input{
    width: 100px;
    height: 50px;
    background-color: yellow;
}

CSS2:

*{
    margin: 0;
    padding: 0;
}
body{
    background-color:#ccc;
}
input{
    width: 100px;
    height: 50px;
    background-color: red;
}

在这里插入图片描述

点击按钮修改文字：
HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<style>
	
	</style>

	<link id="l1" rel="stylesheet" type="text/css" href="new 1.css">	
	<script>	/*在里面定义函数*/
		function setText(){
			tx1.value='修改后的文字';
		}
	</script>
</head>
<body>
	<input id="tx1" type="text">
	<input type="button" value="改文字" onclick="setText()">
</body>		       
</html>

在这里插入图片描述
if语句：
当点击的时候：
div如果显示就变为隐藏
div.style.display.='none';
div如果隐藏就变为显示
div.style.display.='block';

当点击按钮时

HTML：

123

	<link id="l1" rel="stylesheet" type="text/css" href="new 1.css">	
	<script>	/*在里面定义函数*/
		function showHide(){
			if (div1.style.display=='block') {
				div1.style.display='none';
			} else {
				div1.style.display='block';
			}
		}
	</script>
</head>
<body>
	<input type="button" value="显示隐藏" onclick="showHide()">
	<div id="div1">

	</div>
</body>		       
</html>

为a链接加js
<a href="javascript:alert('a')";>链接</a>
在这里插入图片描述
className的使用
通过在<script>定义一个class 用className 赋值给一个<div>
HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<style>
		#div1{
			width: 100px;
			height: 100px;
			border: 1px solid black;
		}
		.box{
			background-color: red;
		}
	}
	</style>

	<link id="l1" rel="stylesheet" type="text/css" href="new 1.css">	
	<script>	/*在里面定义函数*/
		function toRed(){
			div1.className='box';
		}
	</script>
</head>
<body>
	<input type="button" value="变红" onclick="toRed()">
	<div id="div1"></div>

	</div>
</body>		       
</html>

在这里插入图片描述
点击变红后

Hermioneee_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScrip初探

JavaScrip初探鼠标提示框事件：用户的操作-样式：div的display-事件：onmouseover，onmouseoutonclick="alert('点击后弹出的文字');" 当按钮被点击时<input type="checkbox" onmouseover="alert('a')">当鼠标移入触发onmouseover效果移出触发onmouseout效果div1显示/隐藏<!DOCTYPE html> <html lang="en">
复制链接

扫一扫