如何在css中设置动态值？ [关闭]答案

【问题标题】：How to set dynamic value in css? [closed]如何在css中设置动态值？ [关闭]
【发布时间】：2016-09-12 18:57:31
【问题描述】：

我想传递动态 css 值。我想根据索引更改 css 值。

<hr style="width: 150px;float: left;position: absolute;z-index: 99999;top: 28%;margin-left:110px; left: (index == 0) ? '110px' : '145px'%;">

但这里的“左”值不被 html 采用。我该如何解决？

【问题讨论】：

你不能。 CSS 不是动态的。你需要javascript。
如果javascript是一种解决方案，请解释一下
Nope.... Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。

标签： css angular typescript

【解决方案1】：

ngStyle 允许您这样做：

<hr [ngStyle]="{width: '150px', float: 'left', position: 'absolute', 'z-index': 99999, top: '28%', 'margin-left':'110px', left: (index == 0) ? '110px' : '145px'%}">

或

<hr style="width: 150px;float: left;position: absolute;z-index: 99999;top: 28%;margin-left:110px;" 
    [ngStyle]="{left: (index == 0) ? '110px'}"> : '145px'%;">

【讨论】：

【解决方案2】：

要使 Angular 对表达式进行一次评估，请照常使用双花括号：

<hr style="width: 150px;float: left;position: absolute;z-index: 99999;top: 28%;margin-left:110px; left: {{(index == 0) ? '110px' : '145px'}};">

要连续做，试试这个：

<hr style="width: 150px;float: left;position: absolute;z-index: 99999;top: 28%;margin-left:110px;" [style.left]="(index == 0) ? '110px' : '145px'">

【讨论】：

谢谢它对我有用
我想在 css 文件中写这个所以我正在尝试这样--- hr{left:(index==0)?'110px':'145px'} 但它不会有效.请给个建议。
你不能从 CSS 中做到这一点。
这个选项是什么我必须在不同的屏幕尺寸下应用媒体查询我该怎么做