目录
3.现在开始写script样式,我们先把需要获取到的元素获取到
1.先写基础的html样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
<div>告诉你件事。我是广告</div>
<img src="./cha.png" alt="">
<button>点我有惊喜</button>
</div>
</body>
</html>
2.添加后面会用到的css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.hover{
width: 300px;
height: 400px;
background-color: red;
}
#div1{
position: relative;
}
img{
position: absolute;
top: 10px;
left: 260px;
}
</style>
</head>
<body>
<div id="div1">
<div>告诉你件事。我是广告</div>
<img src="./cha.png" alt="">
<button>点我有惊喜</button>
</div>
</body>
</html>
3.现在开始写script样式,我们先把需要获取到的元素获取到
<script>
var sex1 = document.querySelector('#div1 div')
// console.log(sex1)
var imgs = document.querySelector('img')
var btn = document.querySelector('button')
</script>
4.然后通过js添加一些css样式
<script>
var sex1 = document.querySelector('#div1 div')
// console.log(sex1)
var imgs = document.querySelector('img')
var btn = document.querySelector('button')
sex1.className = 'hover'
sex1.style.textAlign = 'center';
sex1.style.lineHeight = '400px'
btn.style.display = 'none';
</script>
5.现在我们写点击事件
<script>
var sex1 = document.querySelector('#div1 div')
// console.log(sex1)
var imgs = document.querySelector('img')
var btn = document.querySelector('button')
sex1.className = 'hover'
sex1.style.textAlign = 'center';
sex1.style.lineHeight = '400px'
btn.style.display = 'none';
// console.log(sex1)
imgs.onclick = function(){
sex1.style.display = 'none';
this.style.display = 'none';
alert('拜了个拜');
btn.style.display = 'block';
}
</script>
这里通过点击事件将sex1.style.display = 'none';和this.style.display = 'none';属性设置好
6.我们现在优化一下,再加一个点击事件
<script>
var sex1 = document.querySelector('#div1 div')
// console.log(sex1)
var imgs = document.querySelector('img')
var btn = document.querySelector('button')
sex1.className = 'hover'
sex1.style.textAlign = 'center';
sex1.style.lineHeight = '400px'
btn.style.display = 'none';
// console.log(sex1)
imgs.onclick = function(){
sex1.style.display = 'none';
this.style.display = 'none';
alert('拜了个拜');
btn.style.display = 'block';
}
btn.onclick = function(){
sex1.style.display = 'block';
imgs.style.display = 'block';
btn.style.display = 'none';
alert('我又回来了');
}
</script>
7.最终样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.hover{
width: 300px;
height: 400px;
background-color: red;
}
#div1{
position: relative;
}
img{
position: absolute;
top: 10px;
left: 260px;
}
</style>
</head>
<body>
<div id="div1">
<div>告诉你件事。我是广告</div>
<img src="./cha.png" alt="">
<button>点我有惊喜</button>
</div>
<script>
var sex1 = document.querySelector('#div1 div')
// console.log(sex1)
var imgs = document.querySelector('img')
var btn = document.querySelector('button')
sex1.className = 'hover'
sex1.style.textAlign = 'center';
sex1.style.lineHeight = '400px'
btn.style.display = 'none';
// console.log(sex1)
imgs.onclick = function(){
sex1.style.display = 'none';
this.style.display = 'none';
alert('拜了个拜');
btn.style.display = 'block';
}
btn.onclick = function(){
sex1.style.display = 'block';
imgs.style.display = 'block';
btn.style.display = 'none';
alert('我又回来了');
}
</script>
</body>
</html>
原文地址:https://blog.csdn.net/tea_tea_
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。