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

html-css013

聊聊JS控制css样式的几种方法,第1张

JS控制css样式的几种方式

我们在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>

代码是纯手写，请记得采纳，谢谢！

JS可以使用css属性来进行样式修改，并且不仅可以修改单一属性，也可以同时修改多个属性。

案例

以下小案例使用JQuery作为演示。

前提： html页面首先必须引入JQuery，放置在body体最后的位置。例如：

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

html部分代码

<p>

    我是一个段落，我没有背景颜色的，但是JQuery会给我增加背景颜色。

</p>

<button>

点击我，给上面段落添加黄色背景颜色。

</button>

JQuery代码

 $("button").click(function(){

        $("p").css("background-color", "yellow")

 })

修改多个属性

$("button").click(function(){

        $("p").css({"background-color": "yellow", "font-size": "200%"})

 }) 结论与解释：

首先使用Jquery选择器进行元素选择 - $("button")

为该元素绑定点击事件 - click

click中的匿名函数修改css属性。

在css属性的修改中，p段落有了黄色背景； 多个属性修改，不但有了黄色背景而且字体是之前的两倍大小。

注意事项：

可以不用非要绑定事件，在本案例中，绑定事件是为了更好地演示Jquery如何操作css属性。

修改单一属性和多个属性的写法是有区别的，多个属性使用{},属性与值之间用：分割，属性与属性之间用，分割。