Как я могу изменить CSS прямо (без переменной) в Blazor? - PullRequest
Новая
       66

Как я могу изменить CSS прямо (без переменной) в Blazor?

0 голосов
/ 08 октября 2019

Я использую серверную часть Blazor.

Я хочу изменить CSS тела.

В Jquery я могу легко написать такой код: 

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

Однако, с этим уроком ( Имена классов CSS по умолчанию для проверки изменений Blazor ) сказано, что я могу изменить CSS только путем изменения имени класса.

Это таксложный при пересечении компонента, особенно тело находится на вершине всех компонентов.

Интересно, есть ли способ изменить CSS непосредственно в Blazor. Спасибо.

Ответы [ 2 ]

3 голосов
/ 08 октября 2019

Хотя это и несколько странно, есть несколько способов выбраться из «блестящего» способа делать вещи и выполнить CSS-модификацию элемента.

Простейший : Точно так же, как вы можете использоватьатрибут class, используйте атрибут style 

<element style=@myStyle></element>

@code {
  string myStyle;

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

Advanced : используйте JS interop

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" });
  }
}
2 голосов
/ 08 октября 2019

Ну, Blazor пока не поддерживает прямую модификацию css, поскольку Web Assembly не поддерживает. Как бы то ни было, это намечено для Web Assembly / Blazor.

Поэтому лучше всего менять имя класса с помощью переменных. По крайней мере, пока.

...