|
目录
?
????????1.先写基础的html样式
????????2.添加后面会用到的css样式
? ? ? ? 3.现在开始写script样式，我们先把需要获取到的元素获取到
????????4.然后通过js添加一些css样式
????????5.现在我们写点击事件
????????6.我们现在优化一下，再加一个点击事件
????????7.最终样式
?
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>
|