发表于： 2022-12-08 19:00:08
0 322
今天学习的js知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示隐藏</title>
<style>
input {
color: #999;
}
</style>
</head>
<body>
<input type="text" value="手机">
<script>
var text = document.querySelector('input');
// onfocus 获得焦点事件
text.onfocus = function () {
// console.log('得到了焦点');
if(this.value === '手机') {
this.value = '';
}
//获得焦点，把文本框里面的文字颜色变深
this.style.color = '#333';
}
// onblur 失去焦点事件
text.onblur = function () {
// console.log('失去了焦点');
if(this.value === '') {
this.value = '手机';
}
//失去焦点，把文本框里面的文字颜色变浅
this.style.color = '#999';
}
</script>
</body>
</html>
小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关闭二维码</title>
<style>
.box {
position: relative;
width: 74px;
height: 88px;
border: 1px solid #ccc;
font-size: 12px;
margin: 100px auto;
text-align: center;
color: #f40;
}
.box img {
width: 60px;
margin-top: 5px;
}
.close-btn {
position: absolute;
top: -1px;
left: -16px;
width: 14px;
height: 14px;
border: 1px solid #ccc;
font-family: Arial, "Helvetica Neue", sans-serig; /*font-family 是规定一个字体列表*/
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
小图片
<img src="../js2/图片/猫.jpg" alt="">
<i class="close-btn">×</i>
</div>
<script>
//1、获取元素
var btn = document.querySelector('.close-btn'); //类名不要忘记加点.
var box = document.querySelector('.box');
//2、注册事件 程序处理
btn.onclick = function () {
box.style.display = 'none';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式属性</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
//1、选择元素
// js 修改 style 样式操作，产生的是行内样式 css权重比较高
var div = document.querySelector('div');
div.onclick = function () {
//div.style 里面是属性是驼峰命名法
this.style.backgroundColor = 'blue';
this.style.width = '250px';
}
</script>
</body>
</html>
返回列表
评论