Question

我正在使用Blazor的服务器端。

我想更改机身的CSS。

在Jquery中，我可以轻松地编写如下代码：

$("body").css("overflow-y","hidden");

但是，正如本教程（Blazor Change Validation default css class names）所述，看来我只能通过更改类名来更改CSS。

穿越组件时非常复杂，尤其是身体在所有组件的顶部。

我想知道是否有一种方法可以直接在Blazor中更改CSS。谢谢。

Answer 1

尽管有些骇人听闻，但是有几种方法可以摆脱做事的“辉煌方式”并完成对元素的CSS修改。

最简单：就像可以使用class属性一样，请使用style属性

<element style=@myStyle></element>

@code {
  string myStyle;

  void MyMethod() {
     myStyle="overflow-y: hidden;"
  }
}

高级：使用JS互操作

a。在主视图（index.html或Pages/_Host.cshtml（取决于项目类型）中，为组件创建一个js终结点

<script>
   window.applyStyleForElement = function(styleOp) {
       document.getElementById(styleOp.id).style[styleOp.attrib] = styleOp.value;
   }
</script>

b。在剃须刀文件中：

@Inject IJRRuntime JSRuntime
<element id=@myId></element>

@code {
  string myId = Guid.NewGuid().CreateGuid().ToString("n)

  async Task MyMethod() {
     await JSRuntime.InvokeAsync("applyStyleForElement", 
      new { id = myId,  attrib = "overflowY", value = "hidden" });
  }
}

最后，将其应用于带有body元素的特殊情况（上面的“高级”方法）。

a。在主视图（index.html或Pages/_Host.cshtml中，取决于项目类型）中，创建一个js端点

<script>
   window.applyStyleForBody = function(style) {
       document.body.style[style.attrib] = style.value;
   }
</script>

b。在剃须刀文件中：

@Inject IJRRuntime JSRuntime
(...)

@code {

  async Task MyMethod() {
     await JSRuntime.InvokeAsync("applyStyleForBody", 
       new { attrib = "overflowY", value = "hidden" });
  }
}

Answer 2

嗯，Blazor还不支持直接的CSS修改，因为Web Assembly不支持。无论如何，它在Web Assembly / Blazor的路线图上。

因此，最好的选择是使用变量更改类名称。至少现在。

Answer 3

嗯，实际上有一种方法可以做到这一点，而且效果非常好（不过可能会有点延迟）。我知道这个答案有点晚了，但它可能会帮助面临同样挑战的其他人。

我们需要创建一些包含所需文件的 JS 代码：

function includeLeftStyle() {
    appendStyle("left.css");
}

function includeRightStyle() {
    appendStyle("right.css");
}

function appendStyle(path) {
    var element = document.createElement("link");
    element.setAttribute("rel", "stylesheet");
    element.setAttribute("type", "text/css");
   element.setAttribute("href", path);
   document.getElementsByTagName("head")[0].appendChild(element);
}

可以根据 MainLayout 中的语言（任何其他代码）调用所需的 CSS：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
     if (firstRender)
     {
         if (// is left)
         {
             await JSRuntime.InvokeAsync<object>("includeLeftStyle");
         }
         else
         {
             await JSRuntime.InvokeAsync<object>("includeRightStyle");
         }
     }
 }

快乐编码！ :)

Answer 4

从@Tewr 的回答开始，我们也可以改变整个班级：

a) 在主视图（index.html 或 Pages/_Host.cshtml 取决于项目类型）中，创建一个 js 端点

<script> 
    window.applyStyleForElement = function (styleOp) { 
        if (styleOp != null) { 
            document.getElementById(styleOp.id).className = styleOp.value; 
        } 
} 
</script>

b) 然后在剃刀文件中

async Task MyMethod(string sortColumn) 
{
    await JsRuntime.InvokeVoidAsync("applyStyleForElement", 
         new { id = sortColumn, value = "newClassName" });
}

如何在Blazor中直接更改CSS（无变量）？

4 个答案: