blocks|key|1142276|text|忽略那些建议属性名称是问题所在的人。jQuery应用编程接口文档明确指出，这两种表示法都是可接受的：http://api.jquery.com/css/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1142277|实际的问题是您在这一行缺少一个右大括号：|1142278|$("#myParagraph").css({"backgroundColor":"black","color":"white");|code-block|syntax|javascript|1142279|将其更改为：|1142280|$("#myParagraph").css({"backgroundColor":+"black",+"color":+"white"});|1142281|下面是一个有效的演示：http://jsfiddle.net/YPYz8/|1142282|​|1142283|$(init);
++++
function+init()+{
++++$("h1").css("backgroundColor",+"yellow");
++++$("#myParagraph").css({+"backgroundColor":+"black",+"color":+"white"+});
++++$(".bordered").css("border",+"1px+solid+black");
}|1142284|<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>|1142285|1142286|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/css/|1|http://jsfiddle.net/YPYz8/^0|1E|Q|0|0|0|0|0|0|B|Q|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]]|C|$]]|$1|D|3|E|5|6|7|1B|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1C|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1D|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|1E|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1F|8|@]|9|@$A|1G|B|1H|1|1I]]|C|$]]|$1|Q|3|R|5|6|7|1J|8|@]|9|@]|C|$]]|$1|S|3|T|5|H|7|1K|8|@]|9|@]|C|$I|J]]|$1|U|3|V|5|H|7|1L|8|@]|9|@]|C|$I|J]]|$1|W|3|R|5|6|7|1M|8|@]|9|@]|C|$]]|$1|X|3|-4|5|6|7|1N|8|@]|9|@]|C|$]]]|Y|$Z|$5|10|11|12|C|$13|14]]|15|$5|10|11|12|C|$13|16]]]]

<p>Ignore the people that are suggesting that the property name is the issue.  The jQuery API documentation explicitly states that either notation is acceptable: <a href="http://api.jquery.com/css/" rel="noreferrer">http://api.jquery.com/css/</a></p>

<p>The actual problem is that you are missing a closing curly brace on this line:</p>

<pre><code>$("#myParagraph").css({"backgroundColor":"black","color":"white");
</code></pre>

<p>Change it to this:</p>

<pre><code>$("#myParagraph").css({"backgroundColor": "black", "color": "white"});
</code></pre>

<p>Here's a working demo: <a href="http://jsfiddle.net/YPYz8/" rel="noreferrer">http://jsfiddle.net/YPYz8/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({ "backgroundColor": "black", "color": "white" });
    $(".bordered").css("border", "1px solid black");
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="bordered"&gt;
    &lt;h1&gt;Header&lt;/h1&gt;
    &lt;p id="myParagraph"&gt;This is some paragraph text&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1142227|text|您可以执行以下任一操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1142228|$("h1").css("background-color",+"yellow");|code-block|syntax|javascript|1142229|或者：|1142230|$("h1").css({backgroundColor:+"yellow"});|1142231|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can do either:</p>

<pre><code>$("h1").css("background-color", "yellow");
</code></pre>

<p>Or:</p>

<pre><code>$("h1").css({backgroundColor: "yellow"});
</code></pre>


blocks|key|927867|text|当你在jQuery中使用多个css属性时，你必须在开头和结尾使用大括号。你漏掉了结尾的花括号。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|927868|function+init()+{
+$("h1").css("backgroundColor",+"yellow");

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

+$(".bordered").css("border",+"1px+solid+black");
}|code-block|syntax|javascript|927869|你可以看看这个jQuery+CSS+Selector+tutorial。|offset|length|927870|entityMap|0|LINK|mutability|MUTABLE|url|http://jstricks.com/jquery-css-methods-selectors/^0|0|0|7|S|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>When you are using Multiple css property with jQuery then you must use the curly Brace in starting and in the end. You are missing the ending curly brace.</p>

<pre><code>function init() {
 $("h1").css("backgroundColor", "yellow");

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

 $(".bordered").css("border", "1px solid black");
}
</code></pre>

<p>You can have a look at this <a href="http://jstricks.com/jquery-css-methods-selectors/" rel="noreferrer">jQuery CSS Selector tutorial</a>. </p>


blocks|key|928023|text|.css()方法使查找和设置CSS属性变得非常简单，并与其他方法(如.animate()+)相结合，可以在您的站点上产生一些很酷的效果。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|928024|在其最简单的形式中，.css()方法可以为一组特定的匹配元素设置单个CSS属性。您只需将属性和值作为字符串传递，元素的CSS属性就会更改。|928025|$('.example').css('background-color',+'red');|928026|这将为任何具有‘example’类的元素将‘background-color’属性设置为‘red’。|928027|但您并不局限于一次只能更改一个属性。当然，您可以添加一组相同的jQuery对象，每个对象一次只更改一个属性，但这会对DOM进行多个不必要的调用，并且是大量重复的代码。|928028|相反，您可以将包含属性和值的Javascript对象作为键/值对传递给.css()方法。这样，就可以在jQuery对象上一次设置所有属性。|928029|$('.example').css({
++++'background-color':+'red',
++++'border'+:+'1px+solid+red',
++++'color'+:+'white',
++++'font-size':+'32px',
++++'text-align'+:+'center',
++++'display'+:+'inline-block'
});|code-block|syntax|javascript|928030|这将更改“.example”元素上的所有CSS属性。|928031|entityMap^0|0|6|0|A|6|0|0|19|0|0|0|Z|6|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|17|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|18|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|R|7|1C|8|@]|D|@]|E|$S|T]]|$1|U|3|V|5|6|7|1D|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|X|$]]

<p>The <code>.css()</code> method makes it super simple to find and set CSS properties and combined with other methods like .animate(), you can make some cool effects on your site.</p>

<p>In its simplest form, the <code>.css()</code> method can set a single CSS property for a particular set of matched elements. You just pass the property and value as strings and the element’s CSS properties are changed.</p>

<p><code>$('.example').css('background-color', 'red');</code></p>

<p>This would set the ‘background-color’ property to ‘red’ for any element that had the class of ‘example’.</p>

<p>But you aren’t limited to just changing one property at a time. Sure, you could add a bunch of identical jQuery objects, each changing just one property at a time, but this is making several, unnecessary calls to the DOM and is a lot of repeated code.</p>

<p>Instead, you can pass the <code>.css()</code> method a Javascript object that contains the properties and values as key/value pairs. This way, each property will then be set on the jQuery object all at once.</p>

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

<p>This will change all of these CSS properties on the ‘.example’ elements.</p>


blocks|key|928046|text|+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%25"});

Or+you+can+use:

var+style+="background-color:red;";
$("p").attr("style",+style);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|928047|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code> If you have one css:

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

If you have more than one css: 

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

Or you can use:

var style =&quot;background-color:red;&quot;;
$(&quot;p&quot;).attr(&quot;style&quot;, style);
</code></pre>


blocks|key|1142403|text|<!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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1142404|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|927941|text|$(".radioValue").css({"background-color":"-webkit-linear-gradient(#e9e9e9，rgba(255,255,255，0.43137254901960786)，#e9e9e9)"，“color”：“#255”，"padding"："8px"})；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|927942|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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


blocks|key|927954|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|927955|$(function(){+
$('.bordered').css({
"border":"1px+solid+#EFEFEF",
"margin":"0+auto",
"width":"80%25"
});

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

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

});|code-block|syntax|javascript|927956|<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>|927957|927958|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(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"
});

});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="bordered"&gt;
&lt;h1&gt;Header&lt;/h1&gt;
&lt;p id="myParagraph"&gt;This is some paragraph text&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|927796|text|错误代码：$("#myParagraph").css({"backgroundColor":"black","color":"white");|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|927797|它在white"之后丢失了"}"|927798|把它改成这样|927799|+$("#myParagraph").css({"background-color":"black","color":"white"});|code-block|syntax|javascript|927800|entityMap^0|5|1U|0|2|6|D|3|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|Y|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|Z|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

<p>wrong code:<code>$("#myParagraph").css({"backgroundColor":"black","color":"white");</code></p>

<p>its  missing   <code>"}"</code> after <code>white"</code></p>

<p>change it to this</p>

<pre><code> $("#myParagraph").css({"background-color":"black","color":"white"});
</code></pre>


<p>I am trying to change the CSS using jQuery:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({"backgroundColor":"black","color":"white");
    $(".bordered").css("border", "1px solid black");
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="bordered"&gt;
    &lt;h1&gt;Header&lt;/h1&gt;
    &lt;p id="myParagraph"&gt;This is some paragraph text&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>What am I missing here?</p>


How to change CSS using jQuery?

jQuery

我正在尝试使用jQuery更改CSS：​$(init);    function init() {    $("h1").css("backgroundColor", "yellow");    $("#myParagraph").css({"backgroundColor":"black","color":"white");    $(".bordered").css("border", "1p

问如何使用jQuery更改CSS？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery更改CSS？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery更改CSS？
EN