如何在jQuery中添加style=display:“块”到一个元素?


当前回答

如果你使用BS5和制表器,我发现我必须添加位置:静态到单元格,并将其添加到按钮。

所以,我添加了以下CSS:

    .table-responsive .dropdown,
    .table-responsive .btn-group,
    .table-responsive .btn-group-vertical {
        position: static;
    }

在Tabulator div中,我有:

<div id="myTable" class="table-sm table-responsive"></div>

最后,关于我做的事情:

myTable.on("dataProcessed", function(data){
  $('[tabulator-field="my_fancy_field"]').css("position", "static");
});

你需要找到正确的单元格。我使用了装载数据的字段。

然后我就得到了(在大多数行上)这样的东西:

在最后一行,它像这样向上弹出:

其他回答

有多个函数来做这个工作,写在底部基于优先级。

. css ()

为匹配的元素集设置一个或多个CSS属性。

$("div").css("display", "block")
// Or add multiple CSS properties
$("div").css({
  display: "block",
  color: "red",
  ...
})

,告诉()

显示匹配的元素,大致相当于调用.css(" Display ", "block")

您可以使用.show()来显示元素

$("div").show()

.attr ()

为匹配的元素集设置一个或多个属性。

如果目标元素没有style属性,可以使用此方法为元素添加内联样式。

$("div").attr("style", "display:block")
// Or add multiple CSS properties
$("div").attr("style", "display:block; color:red")

JavaScript

如果你不想使用jQuery,你可以使用纯javascript为元素添加特定的CSS属性。

var div = document.querySelector("div");
// One property
div.style.display = "block";
// Multiple properties
div.style.cssText = "display:block; color:red"; 
// Multiple properties
div.setAttribute("style", "display:block; color:red");
$("#YourElementID").css("display","block");

编辑:或者正如dave thieben在下面的评论中指出的那样,你也可以这样做:

$("#YourElementID").css({ display: "block" });

根据设置display属性的目的,您可能想看一下

$("#yourElementID").show()

and

$("#yourElementID").hide()

如果你需要添加多个,那么你可以这样做:

$('#element').css({
    'margin-left': '5px',
    'margin-bottom': '-4px',
    //... and so on
});

作为一个好的实践,我也会把属性名放在引号之间,以允许破折号,因为大多数样式都有破折号。如果它是'display',那么引号是可选的,但如果你有破折号,没有引号它就不能工作。无论如何,为了简单起见:总是用引号括起来。

如果你使用BS5和制表器,我发现我必须添加位置:静态到单元格,并将其添加到按钮。

所以,我添加了以下CSS:

    .table-responsive .dropdown,
    .table-responsive .btn-group,
    .table-responsive .btn-group-vertical {
        position: static;
    }

在Tabulator div中,我有:

<div id="myTable" class="table-sm table-responsive"></div>

最后,关于我做的事情:

myTable.on("dataProcessed", function(data){
  $('[tabulator-field="my_fancy_field"]').css("position", "static");
});

你需要找到正确的单元格。我使用了装载数据的字段。

然后我就得到了(在大多数行上)这样的东西:

在最后一行,它像这样向上弹出: