如何使用 jQuery 更改 CSS？

Posted 2023-03-06

技术标签:

【中文标题】如何使用 jQuery 更改 CSS？【英文标题】：How to change CSS using jQuery? 【发布时间】：2011-04-13 09:39:46 【问题描述】：

我正在尝试使用 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>

我在这里错过了什么？

【问题讨论】：

已修复。正如下面的回答，有两种解决方案：（1）删除花括号并将背景颜色更改为背景颜色（css类）或 - 核心问题）将缺少的花括号放在最后并使用DOM / JS符号女巫作品。谢谢大家！在 javascript 中操作 CSS 被认为是不好的做法。考虑添加/删除/切换类。 【参考方案1】：

忽略那些暗示属性名称是问题的人。 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>

【讨论】：

如何添加一个值作为变量，例如paddingTop 作为x个像素数？我尝试过的每一种语法都导致了错误。没关系。知道了：$("#main").css(paddingTop: (var_name+20) + "px"); @Ender: 使用css()，所有的css都被重置，只有这个函数中提到的css仍然存在。如何只添加要更改的 css 并保留以前的 css ？【参考方案2】：

您可以：

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

或者：

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

【讨论】：

"backgroundColor": "yellow" 是有效的，虽然是多余的。 @user449914：您不需要在对象文字中的属性名称周围加上引号 - foo: "bar" 与 "foo": "bar" 相同。【参考方案3】：

为了澄清一点，因为一些答案提供了不正确的信息：

jQuery .css() 方法在许多情况下允许使用 DOM 或 CSS 表示法。所以，backgroundColor 和 background-color 都会完成这项工作。

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

总之，您的代码唯一有问题的是缺少。该行应为：

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

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

一般来说，引用 Javascript 对象 since problems can arise if you do not quote an existing keyword 是一个好习惯。

最后一点是关于 jQuery .ready() 方法

$(handler);

是同义词与：

$(document).ready(handler);

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

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

【讨论】：

【参考方案4】：

当您在 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 tutorial。

【讨论】：

【参考方案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 属性。

【讨论】：

【参考方案6】：

 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);

【讨论】：

【参考方案7】：

只是想补充一点，当通过 css 方法使用数字作为值时，您必须将它们添加到撇号之外，然后在撇号中添加 CSS unit。

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

或

var $block = $('.block')    

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

【讨论】：

【参考方案8】：

<!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>

【讨论】：

【参考方案9】：

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

【讨论】：

一点解释也应该有所帮助。【参考方案10】：

$(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>

【讨论】：

虽然此代码可以回答问题，但提供有关其解决问题的方式和原因的信息可提高其长期价值。【参考方案11】：

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

在white" 之后缺少""

改成这个

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

【讨论】：

您只是在 3 1/2 年后重复了最受欢迎的答案。

以上是关于如何使用 jQuery 更改 CSS？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 CSS（jQuery SVG 图像替换）更改 SVG 图像的颜色？

如何在没有 CSS 且仅使用 JavaScript 或 jQuery/jQueryMobile 的情况下更改设备方向？

js如何更改css样式，

使用 Javascript/jQuery 和 CSS 更改 PNG 颜色

如何使用 jQuery 动画化 css 的变化