js基础入门的一些简单效果

最新推荐文章于 2022-07-23 14:28:19 发布

山间有水

最新推荐文章于 2022-07-23 14:28:19 发布

阅读量1.1k

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/WHY_222/article/details/79459663

版权

JS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一。当鼠标浮上时有提示：

效果原理是:鼠标移上display为block,鼠标移走display为none;

用js事件

当......的时候：onmouseover,onmouseout

alert的使用

获取元素：1.id;

2.doucument.getElementById

<!DOCTYPE html>

<head>

<style>

#div1{

width: 100px;

height: 20px;

background: yellow;

display: none;

}

</style>

</head>

<body>

<label οnmοuseοver="document.getElementById('div1').style.display='block';"

οnmοuseοut="document.getElementById('div1').style.display='none';">

<input type="checkbox"

/>自动登录</label>

//为什么这里会用到label标签呢，因为如果想让鼠标浮在文字上时也出来提示内容，就要用label把它们包起来

</body>

</html>

二。用js换class名

因为id的优先级大于class，所以

<!DOCTYPE html>

<head>

<style>

#div1{

width: 100px;

height: 20px;

background: yellow;

display: none;

}

#div2{

width: 100px;

height: 100px;

background: red;

}

.div3{

width: 200px;

height: 200px;

background: green;

}

</style>

</head>

<body>

<label οnmοuseοver="document.getElementById('div1').style.display='block';"

οnmοuseοut="document.getElementById('div1').style.display='none';">

<input type="checkbox"

/>自动登录</label>

努力学习2

</div>

<divid="div2" οnmοuseοver="document.getElementById('div2').className='div3';"

οnmοuseοut="document.getElementById('div2').className='';">

</div>

</body>

</html>

不能得到我们想要的结果

但是如果把#div2{

width: 100px;

height: 100px;

background: red;

}

改成div{

width: 100px;

height: 100px;

background: red;

}

就可以得到想要的结果

如果不这样，可以用js来实现

<!DOCTYPE html>

<head>

<style>

#div1{

width: 100px;

height: 20px;

background: yellow;

display: none;

}

#div2{

width: 100px;

height: 100px;

background: red;

}

.div3{

width: 200px;

height: 200px;

background: green;

}

</style>

</head>

<body>

<label οnmοuseοver="document.getElementById('div1').style.display='block';"

οnmοuseοut="document.getElementById('div1').style.display='none';">

<input type="checkbox"

/>自动登录</label>

努力学习2

</div>

<div id="div2" οnmοuseοver="document.getElementById('div2').style.width='200px';

document.getElementById('div2').style.height='200px';

document.getElementById('div2').style.background='yellow';"

οnmοuseοut="document.getElementById('div2').style.width='100px';

document.getElementById('div2').style.height='100px';

document.getElementById('div2').style.background='red';">

</div>

</body>

</html>

对其进行修改和完善如下

<!DOCTYPE html>

<head>

<style>

#div1{

width: 100px;

height: 20px;

background: yellow;

display: none;

}

#div2{

width: 100px;

height: 100px;

background: red;

}

.div3{

width: 200px;

height: 200px;

background: green;

}

</style>

function Toyellow(){//封装函数

var obj=document.getElementById('div2').style;

obj.width='200px';

obj.height='200px';

obj.background='yellow';

}

function Tored(){

var obj=document.getElementById('div2').style;

obj.width='100px';

obj.height='100px';

obj.background='red';

}

</script>

</head>

<body>

<label οnmοuseοver="document.getElementById('div1').style.display='block';"

οnmοuseοut="document.getElementById('div1').style.display='none';">

<input type="checkbox"

/>自动登录</label>

努力学习2

</div>

<div id="div2" οnmοuseοver="Toyellow()"

οnmοuseοut="Tored()">

</div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#div1{
width: 100px;
height: 20px;
background: yellow;
display: none;
}
#div2{
width: 100px;
height: 100px;
background: red;
}
.div3{
width: 200px;
height: 200px;
background: green;
}
</style>
<script>
window.οnlοad=function(){
var o=document.getElementById('div2');
o.οnmοuseοver=Toyellow;
o.οnmοuseοut=Tored;
}
function Toyellow(){
var obj=document.getElementById('div2').style;
obj.width='200px';
obj.height='200px';
obj.background='yellow';
}
function Tored(){
var obj=document.getElementById('div2').style;
obj.width='100px';
obj.height='100px';
obj.background='red';
}
</script>
</head>
<body>
<label οnmοuseοver="document.getElementById('div1').style.display='block';"
οnmοuseοut="document.getElementById('div1').style.display='none';">
<input type="checkbox"
/>自动登录</label>
<div id="div1">
努力学习2
</div>
<div id="div2" >

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