Question

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

我在这里缺少什么？

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

Answer 2

你可以这样做：

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

或者：

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

Answer 3

要清楚一点，因为有些答案提供的信息不正确：

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

此外，当您使用参数调用.css()时，您可以选择两个参数。它们可以是2个以逗号分隔的字符串，表示css属性及其值，也可以是包含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是该实例中的处理程序。因此，构造DOM时将触发init。

Answer 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。

Answer 5

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

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

或

var $block = $('.block')    

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

Answer 6

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

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

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

这会将所有具有“示例”类的元素的“背景颜色”属性设置为“红色”。

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

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

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

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

Answer 7

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

Answer 8

while rowNumber < rows:
    userInput = input("Enter a number:").split()

    table[rowNumber] = userInput

    rowNumber +=1

Answer 9

$（＆＃34; .radioValue＆＃34;）。css（{＆＃34; background-color＆＃34;：＆＃34; -webkit-linear-gradient（＃e9e9e9，rgba（255,255， 255,0.43137254901960786），＃e9e9e9）＆＃34;，＆＃34; color＆＃34;：＆＃34;＃454545＆＃34;，＆＃34; padding＆＃34;：＆＃34; 8px＆＃34;} ）;

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

Answer 11

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

在"}"

之后缺少white"

将其更改为此

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

如何使用jQuery更改CSS？

11 个答案: