初探JavaScript魅力（1）

最新推荐文章于 2019-04-16 17:57:21 发布

weihongda666

最新推荐文章于 2019-04-16 17:57:21 发布

阅读量194

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weihongda666/article/details/78721545

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

初探JavaScript魅力 01 , 02

onclick = "alert('点击出现窗口的显示内容');" 点击事件；

onmouseover = " ;" onmouseout = " ;" 鼠标进入/出去；

当鼠标进入复选框时，显示div，当鼠标出去时，隐藏div；

<input type="checkbox" οnmοuseοver="div.style.display='block';" οnmοuseοut="div.style.display='none';" />

上面的代码会有浏览器兼容性问题，不能直接用div的ID，下面的代码才能兼容

<input type="checkbox" οnmοuseοver="document.getElementById('div').style.display='block';" οnmοuseοut="document.getElementById('div').style.display='none';" />

函数的定义和调用

function show(){
		alert('sss');
		}
	show();

使用函数

function toblock(){
		document.getElementById('bos').style.display='block';
		}
	function tonone(){
		document.getElementById('bos').style.display='none';
		}
<input type="checkbox"  οnmοuseοver="toblock()" οnmοuseοut="tonone()" />

按钮点击弹出警告框

<input type="button" value="按钮" οnclick="alert('警告');"  />

两个div之间的变换（鼠标进入div1，会转换成div2，鼠标离开会变成div1）

<style>
	#div1{
		width:100px;
		height:100px;
		background:red;
		}
</style>
<script>
	function toblue(){
		var odiv=document.getElementById('div1');
		odiv.style.width='200px';
		odiv.style.height='200px';
		odiv.style.background='blue';
		}
	function tored(){
		var odiv=document.getElementById('div1');
		odiv.style.width='100px';
		odiv.style.height='100px';
		odiv.style.background='red';
		}
</script>
</head>

<body>
	<div id="div1" οnmοuseοver="toblue()" οnmοuseοut="tored()"></div>
</body>

网页换肤，通过按钮点击事件触发，需要提前写好css1,css2，通过改变的link完成换肤

<link id="ll" rel="stylesheet" type="text/css" href="css1.css" />
<script>
	function skin2(){
		var ol=document.getElementById('ll');
		ol.href='css2.css';
		}
	function skin1(){
		var ol=document.getElementById('ll');
		ol.href='css1.css';
		}
</script>
</head>

<body>
<input type="button" value="皮肤1"  οnclick="skin1()" />
<input type="button" value="皮肤2"  οnclick="skin2()"/>
</body>

按钮点击显示和隐藏div（菜单）

<style>
	#div1{
		width:100px;
		height:200px;
		background:gray;
		display:none;
		}
</style>
<script>
	function showhide(){
		var od = document.getElementById('div1');
		if (od.style.display=='block')
			{
				od.style.display='none';
			}
		else
			{
				od.style.display='block';
			}
		}
</script>
</head>

<body>
<input  type="button" value="显示隐藏"  οnclick="showhide()"/>
<div id="div1">
</div>
</body>

链接里加js

<a href="javascript:alert('a');">链接</a>

总结：

~第一个JS特效，鼠标提示框，原理：DIV的display，事件：onmouseover、onmouseout

~兼容性问题，document.getElementById()在任何浏览器下均可使用

~任何标签都可以加ID ，包括link

~任何标签的任何属性都可以修改

~HTML怎么写，JS就怎么写（className是唯一例外）

weihongda666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初探JavaScript魅力（1）

wu
复制链接

扫一扫

专栏目录

初探JavaScript魅力（1）

“相关推荐”对你有帮助么？