一.什么是css？
- Cascading Style Sheets 通常称为CSS样式表或层叠样式表（级联样式表）
- CSS用于控制网页的外观 (HTML是用于控制网页结构的,JS是控制网页的行为)
- Css让界面变得更加美观
二.如何使用JS操作CSS
1.直接操作style(样式)
语法：元素.style.样式名 = 样式值;
注意：
- 如果CSS的样式名中含有
-，这种名称在JS中是不合法的。 - 比如
background-color需要将这种样式名修改为驼峰命名法。 - 去掉
-，将-后的首字母大写 格式 : backgroundColor
功能实现：通过操作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>
以上就是本文的全部内容，感谢您的阅读。
