家人们，新的一天新的知识点，我们要开启新的课程啦，今天带大家学习如何使用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";//使他变小widthm1.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=()=>{//获取到窗口滚动的距离 scrollTopd1.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>

JavaScript 如何使用JS操作CSS相关推荐

使用JS操作CSS实现JS改变背景图片
使用JS操作CSS实现JS改变背景图片在写一个后台管理系统的界面时候,想要实现每次刷新界面或者访问界面时候会重新加载一张图片并且每次都不一样,于是乎就去想了个方法去实现它,最终方案是通过js来改变d ...
JS操作CSS伪元素
参考链接: segmentfault MDN CSSStyleSheet QQ群闲逛,看到有人说js不能操作css的伪元素样式, 之前没有遇到过应用场景,我当时想到的就是操作通过操作class来控制样 ...
js对应css样式,JS操作CSS样式
一.样式表(css) 使用样式表可以更好的显示WEB文档,也可以结合javascript从而实现很好的控制样式表. 样式(css)与内容(html): HTML是处理文档结构的,HTML可以实现如何把 ...
前端：JS/28/CSS DOM动态样式（style对象，style 对象属性与CSS属性的转换），Event DOM，事件对象简介（DOM和IE中的Event对象），实例：点出满天小星星
CSS DOM动态样式使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
move.js操作CSS3动画
move.js是一款简单的支持CSS3动画的JavaScript库,对于对CSS3的操作不是很熟悉的人来说,使用move.js提供的方法操作CSS3动画更简单方便. 要想使用move.js提供的方法, ...
原生Javascript 操作 css类名 - 踩坑篇
文章目录原生Javascript 操作 css类名效果图示下: 案例 · 代码如下: 重要代码提示: 其他无关参考: 官方参考: 原生Javascript 操作 css类名不建议用 .class ...
JS与CSS交互及JavaScript 特效之四大家族
一.JS获取与CSS交互问题: (1)CSS样式有三种类型:行内样式.内部样式和外部样式 (2)JavaScript获取CSS样式时分为两种情况:行内样式获取法和非行内样式获取法 ...
javascript（JS与css交互）详细介绍
一,JS与css交互基本概述 css有三种设置样式:行内样式,内部样式及外部样式 JavaScript获取css样式分两种情况:行内样式获取法和非行内样式获取法. 行内样式通过element.sty ...
用JavaScript获取网页中的js、css、Flash等文件
目录一.前言二.从E书或网页中获取文件的一般步骤三.从E书或网页中获取链接进来的css文件四.从E书或网页中获取链接进来的js文件五.从E书或网页中获取Flash文件六.从E书或网页中获取 ...

JavaScript 如何使用JS操作CSS

一.什么是css？

二.如何使用JS操作CSS

1.直接操作style(样式)

2.操作class属性

三.代码实操

JavaScript 如何使用JS操作CSS相关推荐

最新文章

热门文章