文章目录
一、修改元素属性
语法
元素. 属性 = 新的值;
使用
<body>
<button id='btn1'>第一张</button>
<button id='btn2'>第二张</button> <br>
<img src="./images/1.jpg" alt="">
<script>
// 获取元素
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var img1 = document.querySelector('img');
// 绑定事件
btn2.onclick = function () {
img1.src = './images/2.jpg';
}
btn1.onclick = function () {
img1.src = './images/1.jpg';
}
</script>
</body>
案例 : 分时问候并显示不同的图片
<body>
<p>早上好</p>
<img src="./images/zao.jpg" alt="">
<script>
// 1. 获取元素
var p = document.querySelector('p');
var img = document.querySelector('img');
var hours = new Date().getHours();
if (hours < 12 && hours > 0) {
p.innerHTML = '早上好';
img.src = './images/zao.jpg';
} else if (hours > 12 && hours < 20) {
p.innerHTML = '中午好';
img.src = './images/zhong.jpg';
} else {
p.innerHTML = '晚上好';
img.src = './images/wan.jpg';
}
</script>
</body>
二、修改表单属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
// 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 绑定事件
btn.onclick = function () {
// 表单里面的值, 是通过 value 来修改的.
input.value = '...';
// 如果想要某个表单被禁用, 不能再点击.
btn.disabled = true;
}
</script>
</body>
</html>
三、点击按钮将密码框切换为文本框
鼠标按下显示密码, 鼠标松开隐藏密码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="password">
<button>眼睛</button>
<script>
// 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 绑定事件
// 鼠标按下显示密码
btn.onmousedown = function () {
input.type = 'text';
}
// 鼠标松开隐藏密码
btn.onmouseup = function () {
input.type = 'password';
}
</script>
</body>
</html>
切换密码显示与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="password">
<button>眼睛</button>
<script>
// 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
var flag = 0;
btn.onclick = function () {
if (flag) {
input.type = 'password';
flag--;
} else {
input.type = 'text';
flag++;
}
}
</script>
</body>
</html>
四、修改样式属性
可以通过JS修改元素的大小, 颜色, 位置等样式.
element.className
: 类名样式操作.
element.style
: 行内样式操作.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
// 获取元素
var di = document.querySelector('div');
di.onclick = function () {
this.style.backgroundColor = 'pink';
}
</script>
</body>
</html>
this 指向当前函数的调用者
JS修改style样式操作, 产生的是行内样式, 权重较高
关闭二维码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?c9xd3i');
src: url('fonts/icomoon.eot?c9xd3i#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?c9xd3i') format('truetype'),
url('fonts/icomoon.woff?c9xd3i') format('woff'),
url('fonts/icomoon.svg?c9xd3i#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
margin: 100px 500px;
}
.box span {
position: absolute;
top: 0px;
width: 20px;
height: 20px;
font-family: 'icomoon';
font-size: 10px;
text-align: center;
padding-top: 2.5px;
color: #ccc;
border: 1px solid #ccc;
box-sizing: border-box;
}
.box span:hover {
cursor: pointer;
}
.box1 {
position: absolute;
width: 200px;
height: 230px;
left: 20px;
color: red;
font-size: 20px;
border: 1px solid #ccc;
text-align: center;
}
.box1 p {
margin: 10px 0;
}
.box1 img {
width: 80%;
}
</style>
</head>
<body>
<div class='box'>
<span></span>
<div class='box1'>
<p>去领红包</p>
<img src="./images/111.png" alt="">
</div>
</div>
<script>
// 获取元素
var span = document.querySelector('span');
var box = document.querySelector('.box');
// 绑定事件
span.onclick = function () {
box.style.display = 'none';
}
</script>
</body>
</html>
循环精灵图案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 250px;
margin: 100px auto;
}
.box li {
float: left;
width: 24px;
height: 24px;
margin: 15px;
background-image: url(./images/222.png);
background-position: 0 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
var index = i * -44;
lis[i].style.backgroundPosition = '0 ' + index + 'px';
}
</script>
</body>
</html>
五、使用className修改样式属性
简单来说就是 先定义css样式, 当事件被触发的时候, 把要修改的元素的类名变成 定义css样式的类名.
className 会直接更改元素的类名, 会覆盖原先的类名.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
.change {
background-color: pink;
margin-top: 100px;
}
</style>
</head>
<body>
<div></div>
<script>
var text = document.querySelector('div');
text.onclick = function () {
text.className = 'change';
}
</script>
</body>
</html>
鼠标移入显示下拉菜单案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?67ioew');
src: url('fonts/icomoon.eot?67ioew#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?67ioew') format('truetype'),
url('fonts/icomoon.woff?67ioew') format('woff'),
url('fonts/icomoon.svg?67ioew#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
* {
margin: 0;
padding: 0;
}
.box {
font-size: 12px;
margin: 100px 300px;
}
.box dl dt {
width: 77px;
height: 43px;
line-height: 43px;
text-align: center;
}
.box dl dt:hover {
background-color: #FCFCFC;
color: #FF8400;
}
.dds {
display: none;
}
.box dl dd {
width: 77px;
height: 35px;
border: 1px solid #FF8400;
border-top: 0;
box-sizing: border-box;
line-height: 35px;
text-align: center;
box-shadow: 2px 0px 3px #ccc;
}
</style>
</head>
<body>
<div class="box">
<dl>
<dt>微博</dt>
<div class='dds'>
<dd>私信</dd>
<dd>评论</dd>
<dd>@我</dd>
</div>
</dl>
</div>
<script>
// 获取元素
var dt = document.querySelector('dt');
var dds = document.querySelector('.dds');
dt.onmouseover = function () {
dds.style.display = 'block';
}
dt.onmouseout = function () {
dds.style.display = 'none';
}
</script>
</body>
</html>