家人们，新的一天新的知识点，我们要开启新的课程啦，今天带大家学习如何使用JS操作css，大家有不懂得可以私信我，或者在下方评论噢，现在就让我带你们进入知识的海洋中。
一.什么是css？
- Cascading Style Sheets 通常称为CSS样式表或层叠样式表（级联样式表）
- CSS用于控制网页的外观 (HTML是用于控制网页结构的,JS是控制网页的行为)
- Css让界面变得更加美观
二.如何使用JS操作CSS
1.直接操作style(样式)
语法：元素.style.样式名 = 样式值;
注意：
- 如果CSS的样式名中含有
-，这种名称在JS中是不合法的。- 比如
background-color需要将这种样式名修改为驼峰命名法。- 去掉
-，将-后的首字母大写 格式 : backgroundColor题目：操作style给图片设置边框
我们通过做题目来了解如何操作style,给大家上代码，代码都有详细备注
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img id="m1" src="img/1.gif">
<br>
<button onclick="fn1()">点我添加边框</button>
<script>
function fn1(){
// 操作css的第一种方法:直接操作style属性
// 给他设置一个边框
m1.style.border="5px solid black";
//使他变小width
m1.style.width="40px";
// 透明度
m1.style.opacity=.5;
}
</script>
</body>
</html>
2.操作class属性
题目:操作class属性设置边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* class名 */
.a{
/* 边框大小 solid:实线 green:给边框设置颜色 */
border: 10px solid green;
box-shadow: 0px 0px 10px yellow;
}
</style>
</head>
<body>
<img id="m2" src="img/2.gif">
<img id="m3" src="img/3.gif">
<br>
<button onclick="fn2()">点我添加边框</button>
<button onclick="fn3()">点我添加边框</button>
<script>
// 设置属性
function fn2(){
// setAttribute设置标签中的属性
// 设置该标签的class属性名为a class="a";
// 我们就可以具备了a里面的样式
m2.setAttribute("class","a");
}
// 操作class属性
function fn3(){
// class是关键字
// 标签中的class属性在js中叫做className;
m3.className="a";
}
</script>
</body>
</html>
三.代码实操
题目一：完成一个类似广告的功能，广告跟着我们的滚动条移动
思路：1.我们要拿到滚动条移动的距离
2.广告跟着滚动条移动这里只需要沿着Y轴运动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border:2px solid black;
/*绝对布局的特点：可以随便调整位置*/
position: absolute;
/*top bottom left right*/
/* 离右边的距离为20px */
right: 20px;
/* 离左边的距离为40px */
top: 40px;
/* 移动间隔时间，可以不设置 */
transition: .1s;
}
</style>
</head>
<div id="d1">
<!-- 点击事件，点击时关闭广告 -->
<span onclick='d1.style.display="none"'>x</span>
<br>
<img src="img/4.gif">
</div>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<script>
// 想让图片跟着滚动条运动
// <window:窗口 -->
window.onscroll=()=>{
//获取到窗口滚动的距离 scrollTop
d1.style.top=40+document.documentElement.scrollTop+"px"
}
</script>
</body>
</html>
题目二:让一个东西跟着鼠标移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
/* 设置大小 */
width:180px;
height:180px;
background:red;
position: absolute;
}
</style>
</head>
<body>
<div id="d1"></div>
<script>
window.onmousemove=(e)=>{
// 拿到鼠标的x和y轴
// 让div跟着鼠标运动
// d1.style.left=e.clientX+"px";
// d1.style.top=e.clientY+"px";
// 如果想要我们鼠标在div的中间
// 减去中间的大小的一半，使鼠标在div正中间
d1.style.left=e.clientX-90+"px";
d1.style.top=e.clientY-90+"px";
}
</script>
</body>
</html>题目三：放大镜功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
/* 设置大小 */
width:300px;
height:300px;
background: red;
position: absolute;
/*设置事件全部无效*/
/* 因为我们 */
pointer-events: none;
display:none;
}
</style>
</head>
<body>
<img id="m1" src="img/1.gif">
<div id="div"></div>
<script>
// 当移入到图片时显示出来
m1.onmouseover=(e)=>{
div.style.display="block";
}
// 当从图片移出时图片消失
m1.onmouseout=(e)=>{
div.style.display="none";
}
// 鼠标移动事件，当移入到图片的时候，div变成该图片
// 只在图片上面移动
m1.onmousemove=(e)=>{
div.style.left=e.clientX-50+"px";
div.style.top=e.clientY-50+"px";
// 当他移动到我们的图片上面时，我们让div变成图片的呀样子
// url位置的意思 来自于图片的src属性,拿到图片
// center/cover平铺的意思
div.style.background="url("+m1.src+") center/cover";
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
