1）element.style 行内样式操作 js 修改的是行内样式，在css当中权重比较高
如果修改的样式比较少或者想达到的功能简单的情况下，我们应该使用 元素.style 的方式来进行修改
<div></div>
<script type="text/javascript">
// 1)获取元素
var div= document.querySelector('div');
// 2)注册事件和处理程序
// js 修改的是行内样式，在css当中权重比较高
var flag = 0;
div.onclick = function(){
if(flag == 0){
// 元素.style后面跟上要修改的属性（但是里面的属性采取的是驼峰命名法
this.style.backgroundColor = 'yellow';
this.style.width= '300px';
flag = 1;
}else{
this.style.background = 'pink';
this.style.width= '200px';
flag = 0;
}
}
</script>简单操作案例 1：关闭二维码案例
核心思路：利用样式的显示和隐藏完成，隐藏采用的是display:none 隐藏元素 display:black 是显示元素
创建一个点击按钮，当用户点击之后，就可以让二维码的盒子进行隐藏
<style>
.box{
width: 100px;
height: 100px;
margin: 100px auto;
text-align: center;
border: 1px solid #ccc;
background-color: pink;
position: relative;
}
.box>img{
width: 60px;
margin-top: 10px;
}
.close-btn{
position: absolute;
top: -1px;
left: -16px;
width: 14px;
height: 14px;
line-height: 14px;
border: 1px solid #ccc;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="box">
淘宝二维码
<img src="image/tao.png" alt="">
<i class="close-btn">x</i>
</div>
<script>
// 1)获取事件
var box = document.querySelector('.box');
var btn = document.querySelector('.close-btn');
// var btn = document.getElementsByClassName('close-btn');
// getElementsByClassName 根据类来获取元素集合 (H5新增的获取元素的方法),
//使用的时候无法直接使用它获取过来的元素（不建议使用）
// console.log(btn);
// 2)注册事件和处理程序
btn.onclick = function(){
// 使用getElementsByClassName 获取到一个伪数组，
//调用的时候直接在类名后面加上索引号进行使用
// btn[0].onclick = function(){
// console.log('dianji');
box.style.display = 'none';
}
</script>
</body>简单操作案例 2：利用for循环实现一组元素的精灵图背景
案例分析：1）精灵图的图片排列是有规律的
2）核心思路：利用for循环，修改精灵图的背景位置background-position
3）找寻各个精灵图之间的位置关系
4）让循环里面的i索引号*44 就是每个图片的y坐标
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.box{
width: 250px;
margin: 100px auto;
}
.box>ul>li{
float: left;
width: 24px;
height: 24px;
background-color: pink;
margin: 15px;
background: url(image/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 type="text/javascript">
// 1)获取元素 所有的li
var lis = document.querySelectorAll('li');
// 利用for循环遍历里面的每一个li标签，然后对每一个li标签添加对应的坐标
for(var i = 0 ; i<lis.length ; i++){
// 让循环里面的i索引号*44 就是每个图片的y坐标
var index=i*44;
// index 就是我们的Y坐标
lis[i].style.backgroundPosition= ' 0 -'+index+'px'
// 添加对应的坐标的时候，注意规定的写法' 0 -'+index+'px' 写法也是 引 引 加 加 中间index是一个变量，加上引号就变成一个字符串了
}
</script>
</body>
简单操作案例 3：显示隐藏文本框的内容 当鼠标点击文本框时，里面的文字隐藏，当鼠标离开文本框的时候，里面的文字显示出来。
案例分析：1）首先表单需要两个事件，获得焦点 onfocus 失去焦点 onblur
2）如果获得焦点，判断表单里面的内容是否为默认文字，如果是默认文字，就清空表单内容
3)如果失去焦点，判断表单里面的内容是否为空，如果为空，则表单的内容改为默认文字
<style>
input{
color: #999;
}
</style>
<body>
<!-- 得到焦点事件和失去焦点事件理解代码 -->
<!-- <input type="text" value="手机">
<script>
// 1)获取元素
var text = document.querySelector('input');
// 2)注册事件和处理程序
// 注册事件，获取焦点
text.onfocus=function(){
console.log('得到了焦点')
}
// 注册事件，失去焦点
text.onblur=function(){
console.log('失去了焦点')
}
</script> -->
<input type="text" value="手机">
<script>
// 1)获取元素
var text = document.querySelector('input');
// 2)注册事件和处理程序
// 注册事件，获取焦点
text.onfocus = function() {
// console.log('得到了焦点')
// === 是全等，里面的值和属性都必须是相同的
if (this.value ==='手机') {
this.value ='';
}
//获得焦点需要把文本框里面的文字颜色变黑
this.style.color = '#333';
}
// 注册事件，失去焦点
text.onblur = function() {
// console.log('失去了焦点')
if (this.value ==='') {
this.value ='手机'
}
//失去焦点需要把文本框里面的文字颜色变浅
// 赋值的时候后面跟的都是字符串
this.style.color = '#999';
}
</script>
</body>2）element.className 类名样式操作
适合于样式较多或者功能比较复杂的情况下使用，我们可以通过 修改元素的className 更改元素的样式
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
}
.change{
background-color: yellow;
color: black;
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<!-- ClassName 修改样式属性 -->
<div>文本</div>
<script>
// 这里是使用 元素.style 获得修改元素样式
// 如果修改的样式比较少或者想达到的功能简单的情况下，我们应该使用 元素.style 的方式来进行修改
var text = document .querySelector('div');
text.onclick=function(){
// text.style.backgroundColor = 'yellow';
// this.style.color='black';
// this.style.fontSize='25px';
// this.style.marginTop = '100px';
// 让我们当前元素的类名改为change
// 我们可以通过 修改元素的className 更改元素的样式 适合于样式较多或者功能比较复杂的情况下使用
this.className = 'change';
// 如果想要保留原先的类名，（这种方式后面会进行大量的使用）我们可以：
this.className = ' first change';
// 这种方式其实就是多类名选择器的使用。
}
</script>简单操作案例4 ：密码框格式提示错误信息的案例
用户如果离开密码框，里面输入的数字不是6-16，则提示错误信息，否则提示输入正确信息
案例分析：1）首先判断的事件是表单失去焦点
2）如果输入正确则提示正确的信息颜色伪绿色小图标变化
3）如果输入不是6-16位，则提示错误信息，颜色为红色小图标变化
4）因为里面的样式变化较多，我们采取className 修改样式
<style>
div{
width: 600px;
margin: 100px auto;
}
.message{
display: inline-block;
font-size: 12px;
color: #999;
background: url(image/right.png) no-repeat;
padding-left: 20px;
}
.wrong{
color: red;
background: url(image/wrong.png) no-repeat;
}
.right{
color: green;
background: url(image/right.png) no-repeat;
}
</style>
</head>
<body>
<!-- 密码框格式提示错误信息的案例 -->
<!-- 用户如果离开密码框，里面输入的数字不是6-16，则提示错误信息，否则提示输入正确信息 -->
<!-- 案例分析：1）首先判断的事件是表单失去焦点
2）如果输入正确则提示正确的信息颜色伪绿色小图标变化
3）如果输入不是6-16位，则提示错误信息，颜色为红色小图标变化
4）因为里面的样式变化较多，我们采取className 修改样式 -->
<div class="register">
密码：
<input type="text" class="ipt">
<p class="message">请输入6-16位密码</p>
</div>
<script>
// 1)获取元素
// querySelector获取元素的时候，里面的字符串需要带上对应的id符号或者是class符号
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
// 2）失去焦点事件
ipt.onblur = function(){
//根据表单里面值的长度 ipt.value.length
if(ipt.value.length<6 || ipt.value.length>16){
message.className = 'message wrong';
message.innerHTML = '您输入的位数不对要求6-16位';
}else{
message.className = 'message right';
message.innerHTML = '您输入的是正确的';
}
}
</script>
</body>3.补充知识点：element.classList.toggle('类名')
切换类采用element.classList.toggle('类名')(支持ie10以上的版本),切换类就是没有就添加，有就移除。
toggle(class, true|false) 在元素中切换类名。
第一个参数为要在元素中移除的类名，并返回 false。如果该类名不存在则会在元素中添加类名，并返回 true。
第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。
开关灯案例1.0 就是没有使用element.classList.toggle('类名') 书写的：
<button class="btn1">关灯</button>
<script>
// 1）获取元素
var btn1 = document.querySelector('.btn1');
// 2)注册事件和处理程序
var flag = 0;
btn1.onclick = function() {
if (flag === 0) {
// 这里的点击判断事件，是需要将整个body的范围都进行更改，所以判断成功后，需要更改的是整个body文件
btn1.innerHTML = '开灯'
document.body.style.backgroundColor = '#000';
flag = 1;
} else {
btn1.innerHTML = '关灯'
document.body.style.backgroundColor = '#fff';
flag = 0;
}
}
</script>这个就是单纯的点击按钮实现body的样式进行更改
当我们使用上面的element.classList.toggle('类名') 进行书写代码，可以对灯光进行更多的设置，可以实现阴影效果等，这种主要使用的知识点就是通过类名样式进行更改，但是这样不需要对里面的每个盒子都进行选中，才能进行操作，这种的选择方式更加简单，但是具有兼容性的问题。
<style>
*{
margin: 0;
padding:0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #222;
}
.on body{
background: radial-gradient(#ccc;#fff);
}
.box2{
position: relative;
width: 80px;
height: 80px;
background-color: #444;
border-radius: 50%;
z-index: 2;
}
.on .box2{
background: #fff;
box-shadow:0 0 100px #fff,
0 0 200px #fff,
0 0 300px #fff,
0 0 400px #fff,
0 0 500px #fff,
0 0 600px #fff,
0 0 700px #fff,
0 0 800px #fff,
0 0 900px #fff,
0 0 1000px #fff;
}
.box2::before{
content: '';
position: absolute;
top: -50px;
left: 22.5px;
width: 35px;
height: 80px;
background-color: #444;
border-top: 30px solid #000;
border-radius: 10px;
}
.on .box2::before{
background-color: #fff;
}
.on .box2::after{
content:'';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 120px;
height: 120px;
background-color: #fff;
border-radius: 50%;
filter: blur(40px);
}
.box2 span:nth-of-type(1){
position: absolute;
top: -16px;
left: -4px;
display: block;
width: 30px;
height: 30px;
background: transparent;
transform: rotate(342deg);
border-bottom-right-radius:40px;
box-shadow: 20px 20px 0 10px #444;
}
.on .box2 span:nth-of-type(1){
box-shadow: 20px 20px 0 10px #fff;
}
.box2 span:nth-of-type(2){
position: absolute;
top: -16px;
right: -4px;
display: block;
width: 30px;
height: 30px;
background: transparent;
transform: rotate(16deg);
border-bottom-left-radius:40px;
box-shadow: -20px 20px 0 10px #444;
}
.on .box2 span:nth-of-type(2){
box-shadow: -20px 20px 0 10px #fff;
}
.wire{
position: absolute;
left: 774px;
bottom: 50%;
width: 4px;
height: 60vh;
background-color: #000;
z-index: 1;
}
.switch{
position:absolute;
bottom: 50px;
right: 50px;
width: 80px;
height: 80px;
background: linear-gradient(#eee,#ccc,#eee);
border: 3px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
.switch .btn{
position:relative;
width: 25px;
height: 40px;
background: linear-gradient(#777, #fff, #777);
border-radius: 6px;
border: 2px solid #000;
cursor: pointer;
}
.switch .btn::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 85%;
background: linear-gradient(#fff,#fff);
border-radius: 4px;
}
.on .switch .btn::before{
top: 15%;
}
</style>
</head>
<body>
<div class="box1">
<div class="wire"></div>
<div class="box2">
<span></span>
<span></span>
</div>
<div class="switch">
<div class="btn"></div>
</div>
</div>
<script>
var btn = document.querySelector('.btn');
btn.onclick = function(){
document.body.classList.toggle('on');
}
</script>通过单击下方的按钮，可以实现灯光的打开与关闭
操作元素样式总结：
738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
