如何使用jQuery更改CSS？

133

我正在尝试使用jQuery更改CSS：

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({"backgroundColor":"black","color":"white");
    $(".bordered").css("border", "1px solid black");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>

展开摘要

我在这里想念什么？

javascript jquery css

— 用户名
source

2

它已修复。如下所述，有两种解决方法：（1）删除花括号并将backgroundColor更改为background-color（css类）或-核心问题）将缺少的花括号放在最后，并使用DOM / JS表示法作品。感谢大家！

— user449914 2010年

1

在javascript中使用CSS可以被认为是较差的做法。考虑添加/删除/切换类。

— 奥斯丁

210

忽略提示属性名称是问题的人员。jQuery API文档明确声明了两种表示形式均可接受： http //api.jquery.com/css/

实际的问题是您在此行上缺少右花括号：

$("#myParagraph").css({"backgroundColor":"black","color":"white");

更改为此：

$("#myParagraph").css({"backgroundColor": "black", "color": "white"});

这是一个工作示例：http : //jsfiddle.net/YPYz8/

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({ "backgroundColor": "black", "color": "white" });
    $(".bordered").css("border", "1px solid black");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>

展开摘要

— 恩德
source

你如何添加一个值作为变量，例如paddingTop作为X PX的数量？我尝试过的每种语法都导致错误。

— 心理学家

没关系。得到了：$("#main").css({paddingTop: (var_name+20) + "px"});

— 心理学家

52

您可以执行以下任一操作：

$("h1").css("background-color", "yellow");

要么：

$("h1").css({backgroundColor: "yellow"});

— 萨夫拉兹
source

3

{"backgroundColor": "yellow"}是有效的，尽管是多余的。

— Tgr

@ user449914：您无需在对象文字中的属性名称周围加上引号- {foo: "bar"}与相同{"foo": "bar"}。

— Tgr 2010年

24

由于某些答案提供了错误的信息，因此需要进行一些整理：

jQuery .css（）方法在许多情况下允许使用DOM或CSS表示法。所以，无论是backgroundColor和background-color将完成这项工作。

此外，.css()使用参数调用时，关于参数可以有两种选择。它们可以是2个以逗号分隔的字符串，表示一个CSS属性及其值，也可以是一个Javascript对象，其中包含一个或多个CSS属性和值的键值对。

总之，您的代码唯一的错误是缺少代码}。该行应显示为：

$("#myParagraph").css({"backgroundColor":"black","color":"white"});

你不能离开大括号，但是你可以离开了引号各地backgroundColor和color。如果使用background-color，则必须使用双引号将其引起来。

通常，引用Javascript对象是一个好习惯，因为如果不引用现有关键字，就会出现问题。

最后一点是关于jQuery .ready（）方法的信息

$(handler);

是同义的搭配：

$(document).ready(handler);

以及第三种不推荐的形式。

这意味着$(init)完全正确，因为init在该实例中是处理程序。因此，init在构建DOM时将被触发。

— 彼得·阿吉泰
source

10

当您在jQuery中使用Multiple css属性时，必须在开头和结尾使用大括号。您缺少结尾花括号。

function init() {
 $("h1").css("backgroundColor", "yellow");

 $("#myParagraph").css({"background-color":"black","color":"white"});

 $(".bordered").css("border", "1px solid black");
}

您可以看一下jQuery CSS Selector教程。

— 萨迪
source

5

的 .css()方法使查找和设置CSS属性变得非常简单，并与.animate（）等其他方法结合使用，可以在您的网站上产生一些很酷的效果。

以最简单的形式，该.css()方法可以为一组特定的匹配元素设置单个CSS属性。您只需将属性和值作为字符串传递，并且元素的CSS属性就会更改。

$('.example').css('background-color', 'red');

对于具有“ example”类的任何元素，这会将“ background-color”属性设置为“ red”。

但是，您不仅限于一次更改一个属性。当然，您可以添加一堆相同的jQuery对象，每个对象一次仅更改一个属性，但这将对DOM进行多个不必要的调用，并且是许多重复的代码。

而是可以向该.css()方法传递一个Javascript对象，该对象包含作为键/值对的属性和值。这样，每个属性都将立即设置在jQuery对象上。

$('.example').css({
    'background-color': 'red',
    'border' : '1px solid red',
    'color' : 'white',
    'font-size': '32px',
    'text-align' : 'center',
    'display' : 'inline-block'
});

这将更改'.example'元素上的所有这些CSS属性。

— 强尼
source

3

只是想添加一点，当使用css方法将数字用作值时，您必须将其添加到撇号之外，然后将CSS 单位添加到撇号中。

$('.block').css('width',50 + '%');

要么

var $block = $('.block')    

$block.css({ 'width': 50 + '%', 'height': 4 + 'em', 'background': '#FFDAB9' });

— 低技术日报
source

1

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $( document ).ready(function() {
         $('h1').css('color','#3498db');
      });
    </script>
    <style>
      .wrapper{
        height:450px;
        background:#ededed;
        text-align:center
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <h1>Title</h1>
    </div>
  </body>
</html>

— Nikit Barochiya
source

1

$（“。radioValue”）。css（{“ background-color”：“-webkit-linear-gradient（＃e9e9e9，rgba（255，255，255，0.43137254901960786），＃e9e9e9）”，“ color”：“＃ 454545“，” padding“：” 8px“}）；

— 片尾直治
source

2

稍作解释也应该有所帮助。

— timiTao

1

$(function(){ 
$('.bordered').css({
"border":"1px solid #EFEFEF",
"margin":"0 auto",
"width":"80%"
});

$('h1').css({
"margin-left":"10px"
});

$('#myParagraph').css({
"margin-left":"10px",
"font-family":"sans-serif"
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
<h1>Header</h1>
<p id="myParagraph">This is some paragraph text</p>
</div>

展开摘要

尽管此代码可以回答问题，但提供有关如何以及为什么解决问题的信息可以提高其长期价值。

— L_J

0

错误代码：$("#myParagraph").css({"backgroundColor":"black","color":"white");

它"}"在之后消失了white"

改成这个

 $("#myParagraph").css({"background-color":"black","color":"white"});

— 银河系
source

8

您只是在3 1/2年后重复了最流行的答案。

— 柯蒂斯·帕特里克