jQuery的属性与样式之样式操作之css()

开发工具与关键技术：mvc

作者：黄志鹏

撰写时间：2019/7/17

我们通过JavaScript获取dom元素上的style属性，.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性，我们可以动态的给元素赋予样式属性。在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现改变元素的样式:

接下来我们举个例子：

我们先声明一个div盒子和一个button按钮

 <div class="divStyle" id="mydiv"> jQuery的属性与样式之样式操作.css()</div>



 <div class="text-center">

  <button class="btn
  btn-primary" id="btnCss">设置CSS</button>

    </div>

接下来我们给div盒子设置一个类，在这个类中我们给一些初始样式：代码如下：

.divStyle{

        width:600px;

        height:200px;

        margin:20px auto;

        background-color:#f00;

        color:#fff;

        font-size:24px;

        line-height:200px;

        text-align:center;

    }

接下来我们就给button按钮一个点击事件，与此同时我们调用css()方法来改变这个div盒子的样式。

代码如下：

   $(function () {

        //按钮的点击事件

        $("#btnCss").click(function () {

            $("#mydiv").css("color", "blue");

            $("#mydiv").css("backgroundColor", "yellow");

            $("#mydiv").css({ 'width': 400, 'height': 300 });

        });

    });

我们现在浏览器中看看这个div盒子的初始样式：

我们再来看看调用css()方法后的样式：