我们在js的工作学习中总会遇到一些不轻易通过style属性动态加载css样式的情况(eg:伪类的样式控制,动画的样式控制)，这里总结一下js改变样式的几种方法：
1，通过style属性或者setAttribute()来更改样式
2，如果只是改变伪类(after,before)的content内容也可以这么做
3，通过更改类名来更改样式
4，那么重点来了：利用document.styleSheets我们获取到所有样式表，然后选择一个样式表通过 insertRule 来添加样式；也可以创建新的cssRules，通过addRule()来添加样式
5，动态加载样式表
如果需要更改的样式比较多，还是建议通过动态加载样式的方式来改变页面样式
本文来自PHP中文网，原文地址： https://www.php.cn/website-design-ask-479590.html 推荐视频教程：《 js基础教程 》
关于通过JS修改CSS值，我已经帮你定出来了，看代码：
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<!--JQ代码：JQ选择器$('.ttt p:eq(0)') 表示class="ttt"的子元素中的第一个P元素； $('.ttt p:eq(1)')表示第二个，依此类推。。。-->
<script type="text/javascript">
$(document).ready(function () {
$('.ttt p:eq(1)').css('float', 'left')
$('.ttt p:eq(2)').css('float', 'right')
})
</script>
<!--
如需加触发按钮就把上面的JQ代码换成
$(document).ready(function(){
$(".click").click(function(){
$('.ttt p:eq(1)').css('float', 'left')
$('.ttt p:eq(2)').css('float', 'right')
})
})
-->
<!--触发按钮-->
<div class="click">click</div>
<div class="ttt">
<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
</div>
</body>
</body>
</html>
代码是纯手写，请记得采纳，谢谢！
