Javascript 更改HTML元素的可见性

我想改变HTML元素的可见性，除了一些特定的元素。我希望元素处于相同的位置和路线，只是改变元素的可见性。有人能帮我吗

我尝试使用jquery做同样的事情，通过查看的答案，但这会改变元素的位置和对齐方式

$('body > :not(#averageCustomerReviews)').hide(); //this hid everything
$('#averageCustomerReviews').appendTo('body'); //but this changed the position

我目前有一些元素的定位器，比如我不想隐藏的XPath/CSS选择器

---

例如，我有这个。我只想通过隐藏所有其他元素来查看当前位置。

可见性用法

$('body > :not(#averageCustomerReviews)').hide(); //this hid everything
$('#averageCustomerReviews').appendTo('body'); //but this changed the position

jQuery

$("#element").css("visibility", "hidden");

$(":not(#element)").css("visibility", "hidden");

CSS

如果希望

#element

以外的所有其他元素都“不可见”：

jQuery

$("#element").css("visibility", "hidden");

$(":not(#element)").css("visibility", "hidden");

CSS

回答你的“之后”问题-让所有人都看不见，只有一个不见

如果无法将“不可见”类指定给应该不可见的元素（最佳解决方案），则可以通过这种方式仅呈现一个子元素，请参见

这意味着：

• 设置所有“不可见”：

  $（“*”）.css（“可见性”、“隐藏”）

• 将要显示的元素设置为可见：

  $（“#元素”）.css（“可见性”、“可见”）

在您的情况下，要显示的元素有点“嵌套”，您可以这样做：

  // set all 'invisible'
  $("*").css("visibility", "hidden");

  // set visible the element with their 'sub-child'
  $("#averageCustomerReviews_feature_div, #averageCustomerReviews, #averageCustomerReviews a, .reviewCountTextLinkedHistogram, .reviewCountTextLinkedHistogram a, .a-popover-trigger, .a-popover-trigger i").css("visibility", "visible");

不太好，但很管用。

---

使用像这样的html树复合体，并且不可能分配一些自定义类。我认为这是唯一的解决方案…

使用

可见性：隐藏。与
显示不同：无元素仍将存在

也适用于除一个之外的所有图元使用以下样式：

* {
    visibility: hidden;
}

#element {
    visibility:visible !important;
}

:not(#element1):not(#element2) {
    visibility: hidden;
}


您可以在CSS中设置，其中
class
是所有要隐藏的元素上的类：

.class {
  visibility: hidden;
}

然后

$('#element').css('visibility', 'visible');

如果要隐藏除
#元素
以外的所有内容，请使用以下方法：

:not(#element) {
    visibility: hidden;
}

有关
：not（）
选择器的更多信息，请参见此处：

更新

您还可以将
：not（）
选择器链接在一起以排除多个元素。例如，如果不应在视图中隐藏
#element1
和
#element2
，请执行以下操作：

* {
    visibility: hidden;
}

#element {
    visibility:visible !important;
}

:not(#element1):not(#element2) {
    visibility: hidden;
}

使用这个

jquery

 $("#elementid").onclick(function() {
  $('body').css({ 'visibility': 'hidden'});
    $('#elementid').css({ 'visibility': 'visible'});
});

可见性：隐藏
是您正在查找的内容。您还可以使用
不透明度
更改元素的可见性。请包含您正在使用的HTML。请不要包含链接，而是包含您的实际代码。这可以确保将来的读者理解问题的上下文。@胡言乱语你能提供链接吗？我想隐藏除
#element
之外的所有其他元素。但它也隐藏
#element
。是因为它嵌套在其他div下吗？@VaibhavAgarwal可能是，可能有一个父div受“隐形”影响，然后子div受影响too@VaibhavAgarwal我认为更好的方法是为所有应该具有可见性的元素指定一个类：hidden。然后你可以用上面的一个例子来调用它。@VaibhavAgarwal如果没有看到你的标记，我们将无法确切地告诉你怎么做。damoiser建议将类分配给所有应该隐藏的元素，这可能是最好的选择。