聊聊JS控制css样式的几种方法

JS控制css样式的几种方式

我们在js的工作学习中总会遇到一些不轻易通过style属性动态加载css样式的情况(eg:伪类的样式控制,动画的样式控制)，这里总结一下js改变样式的几种方法：

1，通过style属性或者setAttribute()来更改样式

2，如果只是改变伪类(after,before)的content内容也可以这么做

3，通过更改类名来更改样式

4，那么重点来了：利用documentstyleSheets我们获取到所有样式表，然后选择一个样式表通过 insertRule 来添加样式；也可以创建新的cssRules，通过addRule()来添加样式

5，动态加载样式表

如果需要更改的样式比较多，还是建议通过动态加载样式的方式来改变页面样式

本文来自PHP中文网，原文地址： >/
data:2022-11-17
author:lfp
move运动函数
dom--需要运动的对象
json--{width:100,height:100,left:100,top:100}
callback--回调函数 可调用自己 实现异步动画效果
/
//主函数
function move(dom,json,callback){
//让每一次动画都是新的开始，防止出现动画一直不停的运行
if(domtimer)clearInterval(domtimer);
var i=0;
var start=0;
//在对象中增加timer 便于控制他停止
domtimer=setInterval(function(){
i++;
//循环每一个目标属性添加动画方法
for(var attr in json){
//获取当前attr的属性值 已经去除了px 还有 如果初始值是auto 用零代替
var cur=getStyle(dom,attr);
if(i==1)start=cur;
//拿到该属性的目标值
var target=json[attr];
//设置分成10次增加增量 你可以根据需要修改
var speed=(target-start)/10;
consolelog(speed+"====="+cur)
//如果没有达到目标值就一直加
if(Mathabs(cur-target)>1){
domstyle[attr]=cur+speed+"px";
}else{
//达到目标值了就停止或者其他情况也停止
clearInterval(domtimer);
//等停止了动画再回调函数进行另外的 *** 作
if(callback)callbackcall(dom);
};
};
},45);
};
//配套函数
function getStyle(dom,attr){
var value="";
if(windowgetComputedStyle){
value=windowgetComputedStyle(dom,false)[attr];
}else{
value=domcurrentStyle[attr];
};
value=parseInt(value);
return value || 0;//如果你再样式中没有设置初始的值就会出现NaN 所以要用0来补充
};
function $(id){
//return documentgetElementById(id);
return documentquerySelector("#"+id);
};

目标描述：多个排列下来，按右边的小按钮，抵达相应位置，鼠标滑动，抵达下一图，或者上一图
知识点：onmousewheel，addEventListener，scrollTo，setTimeout

过程：
1body 宽，高钉死，100vw，100vh，overflow：hidden 使得不出现滚动条，不然不好看
2放进去，排起来，（注意：默认空隙的处理，可以使用flex布局，空隙就不见了）
3制作相对于视窗的按钮，几张就几个按钮，（position: fixed;计算一下高度，可以利用calc计算top使得上下居中）
4美化一下，css写写
5先写简单的按钮事件

6写监听滑动事件(onmousewheel在火狐无效，DOMMouseScroll只在火狐有效)
react在componentDidMount的时候监听

7补充写一下火狐的

9测试检查一下。
完成啦，啦啦啦～
我的截图：

缺点：这里我是一直对页面进行监听，导致滑动过快对时候动画效果开始执行对时间延后。体现为滑动对轻，整个就流畅一点。
ps：写这种带计算带页面，我觉得是考验思维的，你可以对这里的知识点不熟练，但是你必须得能理解每一步的加加减减。

background-color: white;
color: #ccc;
}
50%{
background-color: #ccc;
color: white;
}
to{
background-color: white;
color: #ccc;
}
}
JS部分：
contentclassName = 'changeStyle';

绑定事件函数就好

<input type="button" value="开始" id="play" onclick="play()" />绑定onclick事件

<script>

点击时候调用的函数

function play(){

这里面写你要写的动画

}

</script>

---