JavaScript 如何使用JS操作CSS

2023-09-19 23:53| 来源: 网络整理| 查看: 265

家人们，新的一天新的知识点，我们要开启新的课程啦，今天带大家学习如何使用JS操作css，大家有不懂得可以私信我，或者在下方评论噢，现在就让我带你们进入知识的海洋中。

一.什么是css？ Cascading Style Sheets 通常称为CSS样式表或层叠样式表（级联样式表） CSS用于控制网页的外观 (HTML是用于控制网页结构的,JS是控制网页的行为) Css让界面变得更加美观

二.如何使用JS操作CSS 1.直接操作style(样式)

语法：元素.style.样式名 = 样式值;

注意：

如果CSS的样式名中含有-，这种名称在JS中是不合法的。比如background-color需要将这种样式名修改为驼峰命名法。去掉-，将-后的首字母大写格式 : backgroundColor

题目：操作style给图片设置边框

我们通过做题目来了解如何操作style,给大家上代码，代码都有详细备注

点我添加边框 function fn1(){ // 操作css的第一种方法:直接操作style属性 // 给他设置一个边框 m1.style.border="5px solid black"; //使他变小width m1.style.width="40px"; // 透明度 m1.style.opacity=.5; }

2.操作class属性

题目:操作class属性设置边框

/* class名 */ .a{ /* 边框大小 solid:实线 green:给边框设置颜色 */ border: 10px solid green; box-shadow: 0px 0px 10px yellow; } 点我添加边框点我添加边框 // 设置属性 function fn2(){ // setAttribute设置标签中的属性 // 设置该标签的class属性名为a class="a"; // 我们就可以具备了a里面的样式 m2.setAttribute("class","a"); } // 操作class属性 function fn3(){ // class是关键字 // 标签中的class属性在js中叫做className; m3.className="a"; }

三.代码实操

题目一：完成一个类似广告的功能，广告跟着我们的滚动条移动

思路：1.我们要拿到滚动条移动的距离

2.广告跟着滚动条移动这里只需要沿着Y轴运动

div{ border:2px solid black; /*绝对布局的特点：可以随便调整位置*/ position: absolute; /*top bottom left right*/ /* 离右边的距离为20px */ right: 20px; /* 离左边的距离为40px */ top: 40px; /* 移动间隔时间，可以不设置 */ transition: .1s; } x

哈哈哈

// 想让图片跟着滚动条运动 // window.onscroll=()=>{ //获取到窗口滚动的距离 scrollTop d1.style.top=40+document.documentElement.scrollTop+"px" }

题目二:让一个东西跟着鼠标移动

div{ /* 设置大小 */ width:180px; height:180px; background:red; position: absolute; } 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"; }

题目三：放大镜功能

div{ /* 设置大小 */ width:300px; height:300px; background: red; position: absolute; /*设置事件全部无效*/ /* 因为我们 */ pointer-events: none; display:none; } // 当移入到图片时显示出来 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"; }

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章