你如何改变 R Shiny 中 div 的样式？答案

【问题标题】：How do you change the style of a div in R Shiny?你如何改变 R Shiny 中 div 的样式？
【发布时间】：2021-09-20 02:56:22
【问题描述】：

我正在尝试更改加载屏幕的 z-index，它告诉用户程序正在加载并阻止他们单击任何会使过程变长的内容（加载完成后，所有单击的区域都会同时被单击)。

我目前有以下代码：

loadingState <- function(bool){
  if(bool){
    print("front")
    tags$style(HTML(".loadingDiv {z-index: 1000;}"))
  }
  else{
    print("behind")
    tags$style(HTML(".loadingDiv {z-index: -1000;}"))
  }
}

我的想法是我可以使用这个函数来显示和隐藏 div。这是 CSS 样式表：

.loadingDiv {
  position: fixed;
  z-index: 1000;
  background-color: black; //so I can see if the div is visible or not. Will be transparent
  opacity: .2;
  width:100%;
  height:100%;
  cursor:wait;
}

注意：它从 1000 开始，因为在程序第一次启动时会开始一些计算

我将在其中使用它的功能是这样的：

laggyFunc <- function(){
  loadingState(TRUE)
  -
  - laggy code
  -
  loadingState(FALSE)
}

通过一些 print() 调试，我发现 loadingState() 在正确的时间运行，但是 tags$style(HTML(".loadingDiv {z-index: 1000;}")) 部分不是做任何对 div 可见的事情（在所有加载完成后它就呆在那里）

总之，我想知道如何改变 loadingDiv 的样式。我知道 JavaScript 可以在 HTML 中做到这一点，但我不熟悉 JS 如何在 r shiny 中工作（所以任何教程链接也将是一个很好的帮助：D）

感谢您的阅读，希望您度过愉快的一天:)

【问题讨论】：

要隐藏/显示特定的divs，您可能需要查看shinyjs 包，它已经包含很多javascript 访问代码。
你知道具体的函数或API部分吗？我一直在浏览shinyjs，但我只发现了有关在操作按钮单击或图表更改时更改内容的内容。
如果你给你的 div 一个 id，shinyjs::hide('that_id') 应该隐藏。 show 会做相反的事情。
试了几个小时，似乎没有任何效果。也许我添加 div 的方式正在影响某些事情：ui <- tagList(includeCSS("www/stylesheet.css"), HTML("<div id='loadingDiv'></div>"), 我已经尝试了带有 ',"、#(for id)、HTML() 等的 hide()，但它们都没有奏效。我的加载功能看起来像现在这个（我也单独使用了这些功能，这只是更容易看到调试打印）loadingState <- function(bool){ if(bool){ print("front") shinyjs::show('loadingDiv'); } else{ print("behind") shinyjs::hide('loadingDiv'); } }

标签： css r shiny

【解决方案1】：

前言：SmokeyShakers 为我指出了这个答案的确切方向，我只是不知道必须通过在 UI 中使用 useShinyjs() 声明来初始化 shinyjs 我没有尝试更改 div 的 z-index，而是使用了以下命令： shinyjs::show('loadingDiv') shinyjs::hide('loadingDiv') 还有一个 shinyjs::toggle() 可以将 div 从隐藏更改为显示或显示更改为隐藏（切换可见性），以防你在某个时候想要这样做

大笔记：当试图显示和隐藏一个 div 时，引用它的 id，而不是类。在您的 ui 中声明 useShinyjs() 以使代码正常工作前任： ui <- tagList(useShinyjs(),includeCSS("www/stylesheet.css"), HTML("<div id='loadingDiv'></div>"), navbarPage(...))

这是我在这里的第一个问题和答案，所以如果 Smoky 应该被选为答案，那么他们可以对此提出相同的答案，我会选择它。同时我会选择这个。感谢大家的帮助！

【讨论】：