javascript - Jquery .css 在设置后立即返回 undefined

Question

我的应用程序中有以下代码。前两行很好地绘制了表格中的一个元素。但是，当我只想获取此项的颜色(“#FFFFFF”)时，它返回未定义。这些行完全按照那个顺序排列，它们之间没有任何内容。

var $item = $('#10.row').find('#3.col');
$item.attr('bgcolor', '#FFFFFF');
console.log($item.css('bgcolor'));

Answer 1

请注意，$item.attr('bgcolor', '#FFFFFF') 将使 HTML 看起来像这样:

<div id="10" class="row">
  <!-- bgcolor attribute added by JQuery: -->
  <div id="3" class="col" bgcolor="#FFFFFF"></div>
</div>

要设置和获取 CSS 背景颜色，请使用以下方法之一(两者都在 JQuery 中有效):

// Only use second parameter to set in both cases.
$item.css( "background-color", "#FFFFFF" ) 
// OR
$item.css( "backgroundColor", "#FFFFFF" )

这样的输出:

<div id="3" class="col" style="background-color:#FFFFFF;"></div>

如果你真的想添加 HTML 属性 bgcolor，你可以像这样获取该属性:

console.log($item.attr('bgcolor'));

所以最终的 JS 看起来像这样:

var $item = $('#10.row').find('#3.col');
$item.css('background-color', '#FFFFFF');
console.log($item.css('background-color'));

或者像这样:

var $item = $('#10.row').find('#3.col');
$item.attr('bgcolor', '#FFFFFF');
console.log($item.attr('bgcolor'));