JavaScrip 修改样式属性 js简单案例
【摘要】
1. 修改样式属性（小）
修改样式属性有两种方式，改动小的话直接就是.style进行修改就可以了，改动大的话，就是用类选择器进行修改。
<!DOCTYPE html>
<html l...
1. 修改样式属性（小）
修改样式属性有两种方式，改动小的话直接就是.style进行修改就可以了，改动大的话，就是用类选择器进行修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
div.onclick = function() {
this.style.backgroundColor = 'black' ;
}
</script>
</body>
</html>
2. 淘宝关闭二维码案例
点击二维码的关闭按钮之后，将样式display：none 就可以了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/taobao.png" alt="">
<i class="close">关闭</i>
</div>
<script>
// 获取元素
var box = document.querySelector('.box');
var close = document.querySelector('.close');
close.onclick = function() {
box.style.display = 'none' ;
}
</script>
</body>
</html>
3. 循环精灵图
改变精灵图的位置就可以实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.box {
width: 250px;
margin: 100px auto;
}
.box li {
float: left;
width: 24px;
height: 24px;
background-color: pink;
margin: 15px;
background: url(images/sprite.png) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<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>
4. 显示隐藏文本框内容案例
文本框里面的文字全是value属性，所以只要是修改value里面的内容就可以，使用到的技术就是获得焦点和失去焦点这两个属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
color: #999;
}
</style>
</head>
<body>
<input type="text" value="手机">
<script>
// 获取元素
var text = document.querySelector('input') ;
// 注册事件 得到焦点
text.onfocus = function () {
// console.log('得到了焦点');
if (text.value == '手机') {
this.value = '' ;
}
// 获得焦点需要把文本框里面的文字颜色变黑
this.style.color = '#333' ;
}
// 注册事件 失去焦点
text.onblur = function () {
// console.log('失去了焦点');
if (text.value == '') {
this.value = '手机' ;
}
this.style.color = '#999' ;
}
</script>
</body>
</html>
5. className修改样式属性
如果样式多的话，就不利于我们直接使用.style来进行修改，所以这个就是直接等价于给某个盒子加上了一个类名 等价于 class = “xxx” ，区别就是这个不显示，只有触发事件时候才进行显示。注意的是，如果只写一个新的类名的话，就得样式就会消失，只存在一个类名效果，如果想层叠的话，就是将两个类名都写到。
<!-- calssName 就相当于给盒子加了一个类名一样。区别就是在于需要绑定操作进行触发之后才能显示效果 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.change {
width: 300px;
height: 300px;
background-color: black;
}
</style>
</head>
<body>
<div>你好</div>
<script>
var change = document.querySelector('div');
change.onclick = function () {
// 单独写一个的话会层叠掉原先的属性
this.className = 'change' ;
// 旧的和新的写到一起的话就会使得属性进行叠加处理
this.className = 'first change' ;
}
</script>
</body>
</html>
6. 密码框提示信息案例
效果就是当输入完密码，失去焦点的时候，就会进行一个判断，使用input.value.length判断密码的长度大小，并且使用类名修改属性，使用.innerHTML修改文字属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url(images/mess.png) no-repeat left center;
padding-left: 20px;
}
.wrong {
color: red;
background-image: url(images/wrong.png);
}
.right {
color: green;
background-image: url(images/right.png);
}
</style>
</head>
<!-- 大体就是失去焦点之后，要进行判断密码的value的length是否满足需求，然后更改相应的样式 更改样式的时候使用的是className -->
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
<script>
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
ipt.onblur = function () {
if (this.value.length < 6) {
message.className = 'message wrong';
message.innerHTML = '您输入的位数不对，要求是6~16位';
} else {
message.className = 'message right';
message.innerHTML = '您输入的正确';
}
}
</script>
</div>
</body>
</html>
7. 京东关闭广告案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
}
.luzhou {
width: 100%;
}
.close {
position: absolute;
top: 0px;
right: 0px;
width: 30px;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/luzhou.jpg" alt="" class="luzhou">
<img src="./images/close.jpg" alt="" class="close">
</div>
<script>
var box = document.querySelector('.box') ;
var close = document.querySelector('.close') ;
close.onclick = function() {
box.style.display = 'none' ;
}
</script>
</body>
</html>
8. 开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button >开关灯</button>
<script>
// 获取元素
var btn = document.querySelector('button');
var body = document.body;
// 注册 + 函数
var flag = 0 ;
btn.onclick = function () {
if( flag == 0 ) {
body.style.backgroundColor = 'black' ;
flag = 1 ;
} else {
body.style.backgroundColor = 'white' ;
flag = 0 ;
}
}
</script>
</body>
</html>
9. 世纪佳缘案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.psw {
color: #999999;
}
.dianji {
border: 1px solid pink;
outline: none;
}
.shiqu {
border: 1px solid #aaa;
outline: none;
color: #999999;
}
</style>
</head>
<body>
<input type="text" class="psw" value="邮箱/ID/手机号">
<script>
// 获取元素
var psw = document.querySelector('input') ;
psw.onfocus = function () {
console.log('获得焦点');
this.value = '' ;
psw.className = 'dianji' ;
}
psw.onblur = function () {
console.log('失去焦点');
this.className = 'shiqu' ;
if(this.value == '') {
this.value = '邮箱/ID/手机号' ;
}
}
</script>
</body>
</html>
文章来源: blog.csdn.net，作者：花花叔叔，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/qq_52077949/article/details/120175267
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）