如何使用jQuery更改CSS？

Question

如何使用jQuery更改CSS？

176

我试图使用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>

我在这里缺少什么？

- user449914

2

已经修复了。如下回复，有两个解决方案：（1）删除花括号并将backgroundColor更改为background-color（CSS类），或者（核心问题）在末尾放置缺失的花括号并使用DOM / JS符号，这也可以正常工作。谢谢大家！ - user449914

1

在 JavaScript 中操作 CSS 可被认为是不良做法。考虑使用添加/删除/切换类的方式。 - Austin

12个回答

67

你可以选择以下两种方式：

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

或者：

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

- Sarfraz

3

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

@user449914：在对象字面量中，您不需要在属性名称周围加引号-{foo："bar"}与{"foo"："bar"}相同。 - Tgr

25

为了澄清一些事情，因为一些答案提供了错误的信息：

jQuery .css() 方法允许在许多情况下使用 DOM 或 CSS 符号。因此，backgroundColor 和 background-color 都可以实现目标。

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

总之，你代码中唯一错误的地方是缺少一个 }。该行应该写成：

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

你不能省略大括号，但是在backgroundColor和color周围可以省略引号。如果你使用background-color，你必须加上引号，因为它包含连字符。

一般来说，将JavaScript对象用引号引起来是一个好习惯，因为如果不引用现有的关键字可能会导致问题。

最后提一下jQuery的.ready()方法。

$(handler);

是与同义的：

$(document).ready(handler);

还有第三种不推荐的形式。

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

- Peter Ajtai

11

.css() 方法非常简单易用，可以方便地查找并设置CSS属性。结合其他方法例如 .animate()，你可以在你的网站上制作一些很酷的效果。

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

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

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

但你不仅限于同时更改一个属性。当然，你可以添加一堆相同的jQuery对象，每个对象一次只更改一个属性，但这样做会对DOM进行多个不必要的调用，并且会有很多重复的代码。

相反，你可以将包含属性和值的键/值对的Javascript对象传递给 .css() 方法。这样，每个属性都将一次性设置在jQuery对象上。

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

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

- Johnny

10

使用jQuery时，如果要同时使用多个css属性，则必须在开头和结尾处使用花括号。你遗漏了结束的花括号。

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

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

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

您可以查看这个jQuery CSS选择器教程。

- Sadi

5

 If you have one css:

   $("p").css("background-color": "pink");

If you have more than one css: 

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

Or you can use:

var style ="background-color:red;";
$("p").attr("style", style);

- Sarasjd

3

我想补充一点，当使用数字作为css方法的值时，您需要将它们添加到撇号之外，然后在撇号中添加CSS单位。

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

或者

var $block = $('.block')    

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

- lowtechsun

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>

- user8743488

虽然这段代码可能回答了问题，但提供解决问题的方式和原因可以提高其长期价值。 - L_J

1

$(".radioValue").css({"background-color":"-webkit-linear-gradient(#e9e9e9,rgba(255, 255, 255, 0.43137254901960786),#e9e9e9)","color":"#454545", "padding": "8px"});

将执行此段代码对类为“radioValue”的元素进行样式设置，包括背景颜色、字体颜色以及内边距。

- Daooji katara

2

稍微解释一下也会有所帮助。 - timiTao

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

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ender · Accepted Answer

忽略那些建议属性名称有问题的人。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>