李涛自留地
回到顶部
首页 > jQuery学习 > jQuery中如何给元素添加多个css样式

jQuery中如何给元素添加多个css样式

jQuery中如何给元素添加多个css样式来对网站页面进行美化呢？在jQuery中我们如果要给元素添加css样式需要用到.CSS()方法，语法格式是.css("属性","属性值")，这是给元素添加单个css样式的语法，那么如何给一个元素添加多个css样式呢？添加多个css样式和添加一个css样式又有什么区别呢？举个栗子，演示Dome如下: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给元素添加多个css样式</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .dome{
            width: 300px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="demo">
    <div>我是第一行文本</div>
    <div>我是第二行文本</div>
    <div>我是第三行文本</div>
    <div>我是第四行文本</div>
</div>
<script>
    $(function () {
      $('.demo div').css({"background":"rgba(255,0,0,0.7)","color":"#fff","margin":"24px"});
        $('.demo div:first').css("background","#000")
    })
</script>
</body>
</html>

效果图：
jQuery中如何给元素添加多个css样式

一、给元素添加单个css样式：
dome中的$('.demo div:first').css("background","#000")，这个是给元素添加单个css样式。

二、给元素添加多个css样式：
dome中的$('.demo div').css({"background":"rgba(255,0,0,0.7)","color":"#fff","margin":"24px"});就是给元素添加多个css样式，分别给div添加了背景样式、颜色和外边距。可以发现给元素添加多个样式的语法与单个的语法有所不同，添加多个css样式的语法格式是：.css({"属性1":"属性值1","属性2":"属性值2"})

通过以上demo中的语法运用，我们可以发现jQuery中给元素添加多个css样式和单个css样式还是有所区别的，添加多个元素的时候要在.css()方法中的()内添加{}，各个元素之间用,隔开，而属性与属性值中间用:隔开。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。