如何使用 jQuery 改变 CSS？

小开

你可以选择:

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

或者:

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

小开

忽略那些认为属性名是问题所在的人。JQueryAPI 文档明确指出，这两种表示法都是可以接受的: 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>

小开

澄清一下，因为有些答案提供了不正确的信息:

JQuery一个 href = “ http://api.jquery.com/css/”rel = “ norefrer”> . css () 方法允许在许多情况下使用 DOM 或 CSS 符号。因此，backgroundColor和 background-color都可以完成这项工作。

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

总之，你的代码唯一的错误就是缺少 }。这一行应该是:

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

不能省略花括号，但可以省略 backgroundColor和 color左右的引号。如果使用 background-color，则必须在其周围加引号，因为使用了连字符。

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

最后一个注意事项是关于 jQueryRel = “ norefrer”> . ready () 方法的

$(handler);

是 同义词:

$(document).ready(handler);

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

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

小开

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

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

换成这个

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

小开

当您在 jQuery 中使用 Multiplecss 属性时，您必须在开始和结束时使用花括号。你错过了结尾的花括号。

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


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


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

你可以看看这个 JQuery CSS 选择器教程。

小开

只是想添加，当使用 CSS 方法的值数字，你必须添加他们以外的撇号，然后添加在撇号的 CSS 单位。

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

或者

var $block = $('.block')


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

小开

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

小开

$(“ . radiValue”) . css ({“背景-颜色”: “-webkit-线性-梯度(# e9e9e9，rgba (255,255,255,0.43137254901960786) ，# e9e9e9)”，“颜色”: “ # 454545”，“填充”: “8px”}) ;

小开

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

小开

.css()方法使得查找和设置 CSS 属性以及与其他方法(如。Animate () ，你可以在你的网站上制作一些很酷的效果。

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

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

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

但是您不限于一次只改变一个属性。当然，您可以添加一大堆相同的 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 属性。

小开

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