我们可以通过 JS 修改元素的大小、颜色、位置等样式。
element.style 行内样式操作
element.className 类名样式操作
一、element.style 行内样式操作
使用element.style 获得修改元素的样式。更改的结果会变为行内样式。
使用方法为： 要修改的元素.element.style.想要更改的样式 = ‘更改的样式’
注意：
JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高
例1:运用element.style 行内样式操作更改div点击前和点击后的样式。
要求：当点击了div之后，div背景颜色由黄绿色变为粉色，并且宽度增加为250px；
css
div {
width: 200px;
height: 200px;
background-color: greenyellow;
}
html & js
<body>
<div></div>
<script>
// 1. 获取元素
var div = document.querySelector('div');
// 2. 注册事件 处理程序
div.onclick = function() {
div.style.backgroundColor = 'pink';//this.style.backgroundColor = 'pink';//更改点击后的背景颜色
div.style.width = '250px';//this.style.width = '250px';//更改点击后的宽度
}
</script>
</body>
例2:点击关闭按钮，关闭当前显示元素
要求：当点击按钮后，整个盒子消失
思路：
利用样式的显示和隐藏元素，display：none隐藏元素；display：block显示元素
点击按钮，让盒子隐藏起来
css
<style>
.box {
position: relative;
width: 74px;
height: 88px;
border: 1px solid rgb(211, 211, 211);
margin: 100px auto;
font-size: 12px;
text-align: center;
color: #f40;
/* display: block; */
}
.box img {
width: 60px;
margin-top: 5px;
}
.close-btn {
position: absolute;
top: -1px;
left: -16px;
width: 14px;
height: 14px;
border: 1px solid rgb(211, 211, 211);
line-height: 14px;
cursor: pointer;
}
</style>
html
<div class="box">
<img src="images/doraemon.gif" alt="">
<i class="close-btn">×</i>
</div>
js
<script>
// 1. 获取元素
var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
// 2.注册事件 程序处理
btn.onclick = function() {
box.style.display = 'none';//点击时盒子隐藏
}
</script>
使用图片：
例3:显示隐藏文本框内容
要求：鼠标未选中输入框时显示文字且文字为灰色，当鼠标选中输入框时文字消失且输入文字颜色为黑色
思路：
首先表单需要2个新事件，获得焦点 onfocus 失去焦点 onblur
如果获得焦点， 判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容
如果失去焦点， 判断表单内容是否为空，如果为空，则表单内容改为默认文字
css
<style>
input {
color: #999;
}
</style>
html & js
<body>
<input type="text" value="手机">
<script>
// 1.获取元素
var text = document.querySelector('input');
// 2.注册事件 获得焦点事件 onfocus
text.onfocus = function() {
// console.log('得到了焦点');
if (this.value === '手机') {
this.value = '';
}
// 获得焦点需要把文本框里面的文字颜色变黑
this.style.color = '#333';
}
// 3. 注册事件 失去焦点事件 onblur
text.onblur = function() {
// console.log('失去了焦点');
if (this.value === '') {
this.value = '手机';
}
// 失去焦点需要把文本框里面的文字颜色变浅色
this.style.color = '#999';
}
</script>
</body>
二、element.className 类名样式操作
如果样式修改较多，可以采取操作类名方式更改元素样式。 class因为是个保留字，因此使用className来操作元素类名属性，className 会直接更改元素的类名，会覆盖原先的类名。
如果想要保留原来的类名又想添加新的类名，可以这样写 this.className = 'first change';
这里，如果添加了多个类，具体应用那个类添加的样式，遵循CSS样式优先级规则，写在下面的样式优先级更高通过触发事件给元素添加类名，来实现为元素更改更多的样式；适合于样式较多，功能更加复杂的情况。
例1: 运用element.className 类名样式操作
要求：单击div，为元素添加class类名，添加名为change的类，使用类change的样式。
点击之后：（为更改元素的类名，并且更改过后的样式会覆盖原有样式，所以点击完之后 类名由 first 变成了 change）
css
<style>
div {
width: 100px;
height: 100px;
background-color: rgb(243, 198, 127);
}
.change {
background-color: rgb(60, 170, 180);
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
html & js
<body>
<div class="first">文本</div>
<script>
// 1. 使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用
var test = document.querySelector('div');
test.onclick = function()
this.className = 'change';
}
</script>
</body>
例2:密码框格式提示错误信息
要求：如果用户离开密码框，里面输入的个数不是6~16，即提示错误信息，否则 提示输入正确信息
思路：
首先判断使用的事件是失去焦点 onblur
如果输入正确则提示正确的信息，小图标颜色为绿色
如果输入不是6~16位，则提示错误信息颜色为红色，小图标变化
因为里面需要改变的样式比较多所以采用 className 修改样式
css
<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>
html & js
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
// 1.获取元素
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
//2. 注册事件 失去焦点
ipt.onblur = function() {
// 根据表单里面值的长度 ipt.value.length
if (this.value.length < 6 || this.value.length > 16) {
// console.log('错误');
message.className = 'message wrong';
message.innerHTML = '您输入的位数不对要求6~16位';
} else {
message.className = 'message right';
message.innerHTML = '您输入的正确';
}
}
</script>
</body>
使用图片：
如有错误欢迎大家来找茬！！！！
版权归原作者 二大一 所有， 如有侵权，请联系我们删除。