javascript - 无法使用 jQuery 获取或设置 div 的 css

Question

我有以下 html 对象

<div class="dataTables_filter" id="DataTables_Table_2_filter"><label>Sök: <input type="text" aria-controls="DataTables_Table_2"></label></div>

现在我想以交互方式操作这个 css 以按照我想要的方式定位它。

当我尝试

$('#DataTables_Table_2_filter').css({"float":"left"})

什么也没有发生，当我试图提醒它当前的 css 时

alert( $('#DataTables_Table_2_filter').css('float') );

我只是在我的警报框中得到“未定义”。

如果我做

alert( $('#DataTables_Table_2_filter')

我在警报框中收到“对象对象”。

这怎么了？

Answer 1

您可能在准备好之前访问元素，请使用document.ready()，因为您的代码 id 有效

现场演示

<div class="dataTables_filter" id="DataTables_Table_2_filter"><label>Sök: <input type="text" aria-controls="DataTables_Table_2"></label></div>

$(document.ready(function(){
   $('#DataTables_Table_2_filter').css({"float":"left"});
   alert( $('#DataTables_Table_2_filter').css('float') );
});

Answer 2

尝试这个

$('#DataTables_Table_2_filter').on('click', function(){
  alert( $('#DataTables_Table_2_filter').css('float') );
});

一个看到这个例子

问候。

Answer 3

可能是你在这个代码块之外有一些冲突的 ID 问题，因为它在这个演示中工作正常

html:

<div class="dataTables_filter" id="DataTables_Table_2_filter">
      <label>Sök: <input type="text" aria-controls="DataTables_Table_2"/></label>
</div>

jQuery：

$('#DataTables_Table_2_filter').css({"float":"left"});
alert( $('#DataTables_Table_2_filter').css('float') );