*我们可以通过JS修改元素的大小 颜色 位置等样式
注:
①JS里面的样式采用驼峰命名法,比如:fontSize,backgroundColor
②JS修改style样式产生的是行内样式,权重为1000
1.element.style 行内样式操作 (样式比较少时使用)
例1:点击div改变它的颜色和宽度
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script type="text/javascript">
window.onload=function(){
var div=document.querySelector(".a");
var flag=true;
div.onclick=function(){
if(flag==true){
div.style.backgroundColor="purple"; //或者是
//this.style.backgroundColor="purple";
div.style.width="250px";
flag=false;
}else{
div.style.backgroundColor="pink"; //或者是
//this.style.backgroundColor="purple";
div.style.width="200px";
flag=true;
}
}
}
</script>
</head>
<body>
<div class="a"></div>
</body>
2.element.className 类名样式操作
例2:将要改变的样式写到CSS中,然后改变其类名即可
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
.change{
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var div=document.querySelector("div");
div.onclick=function(){
div.className="change"; //当前元素类名变为change
//div.className="first change " //要保留原先的类名 first change
}
}
</script>
<body>
<div class="first">哈哈哈哈哈</div>
</body>
例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>
div{
width: 600px;
margin: 100px auto;
}
.message{
display:inline-block;
font-size: 12px;
color: #999;
padding-left: 24px;
}
.wrong{
color: red;
background: url(img/红色.png) no-repeat left center;
}
.right{
color: green;
background: url(img/绿色.png) no-repeat left center;
}
</style>
<script type="text/javascript">
/*
分析:
1.判断的事件是失去焦点onblur
2.如果输入正确则变为绿色小图标 加提示文字
3.输入错误则变为红色小图标 加提示文字
4.使用className修改样式
*/
window.onload=function(){
var ipt=document.querySelector(".ipt");
var message=document.querySelector(".message");
ipt.onblur=function(){
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>
</head>
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
</body>
</html>
例4.点击X关闭图片
<style>
.box img{
width: 100px;
margin-top: 5px;
}
.close{
position: absolute;
top: 15px;
left: 12px;
width: 14px;
height: 14px;
border: 1px solid #ccc;
line-height: 14px;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload=function(){
var box=document.querySelector(".box")
var close=document.querySelector(".close");
close.onclick=function(){
box.style.display="none"; //隐藏盒子
}
}
</script>
</head>
<body>
<div class="box">
<img src="img/孙笑川.jpg" alt="">
<i class="close">x</i>
</div>
</body>
例5.仿我的京东案例
<style>
.title{
position: relative;
top: 10px;
width:65px;
height: 30px;
background-color: pink;
cursor: pointer;
overflow: hidden;
}
p{
position: relative;
/* 相对定位,相对于其正常的位置定位 */
top: -10px;
}
.mouse{
height: 140px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var title=document.querySelector('.title');
title.onmouseover =function(){
title.className="title mouse"
}
title.onmouseout=function(){
title.className="title";
}
}
</script>
<body>
<div class="title">
<p>我的京东</p>
<p>订单</p>
<p>购物车</p>
<p>我的白条</p>
</div>
</body>