动态改变 CSS 样式高度答案

【问题标题】：Dynamically change CSS style height动态改变 CSS 样式高度
【发布时间】：2018-10-16 14:10:19
【问题描述】：

我正在制作用户排行榜：

 <div class="user">
  <ul id="jogadores" *ngFor="let u of sortedUsers$; let i=index;" (click)="routeToUser(u.id)">
    <li class="user">
      <img class="gravatar" src="https://www.gravatar.com/avatar/{{u.imgUrl}}?d=https://www.1plusx.com/app/mu-plugins/all-in-one-seo-pack-pro/images/default-user-image.png" />
      <div class="progressBar">
        <span style="height: 100%;">
          <i></i>
          <b>{{sortedUsers$[i].points}}</b>

        </span>
      </div>
      <span class="username">
        <strong>{{sortedUsers$[i].username}}</strong>
      </span>
    </li>
  </ul>
</div>

每个<ul> 元素都有一些来自数组的值。整个晚上我都在尝试将<span style="height: 100%;"> 的值从{{sortedUsers$[i].points}} 更改为某个值，因此每个进度条都会根据用户拥有的点数而变化。我尝试传递值：

<span style="height: {{sortedUsers$[i].points}} %;">

同样使用 jQuery 实现，但也失败了。

【问题讨论】：

<span style="height: 100px;"> 工作了吗？如果不将显示更改为块或内联块
是的，它可以工作，但我需要将值 100 更改为循环中的任何内容，但这不起作用。像 element[1] 它必须是 80，对于 element[1] 20 等等
您是否已经将 span 作为块或内联块元素？

标签： jquery html css angular

【解决方案1】：

高度和宽度不能应用于span。

您可以将其设为block element 或inline-block，然后它将接受您的高度和宽度。

在此处阅读更多信息：Does height and width not apply to span?

【讨论】：

inline-block 更适合 span（因为通常用作上下文包装内联元素） - 而 div 最适合 DIVisor 块元素。跨度>
这可以根据需要决定，但我已经更新了答案以提供更多清晰性:)

【解决方案2】：

不知道你有没有注意到，{{sortedUsers$[i].points}} 和 %; 之间有一个空格，应该是这样，没有空格

<span style="height: {{sortedUsers$[i].points}}%;">

【讨论】：

【解决方案3】：

使用样式属性绑定

<span [style.height]="sortedUsers$[i].points">
    <i></i>
   <b>{{sortedUsers$[i].points}}</b>
</span>

值可以是这个sortedUsers$[i].points = "100%"

【讨论】：

【解决方案4】：

查看ngStyle

更新一个 HTML 元素样式。

<span [ngStyle]="{'height': `${sortedUsers$[i].points}%`}"></span>

您的值如下所示，其中每个数字代表一个percent: sortedUsers$[i].points = 100 // Percent

【讨论】：

【解决方案5】：

感谢大家的帮助！对我有用的是：

 <span class="user" [ngStyle]="{ 'height': getPoints(i)}">
          <i></i>
          <b>{{sortedUsers$[i].points}}</b>
  </span>

与：

getPoints(id) {
return this.sortedUsers$[id].points + '%';}

我很确定你们中的一些人也可以，但如果以后有人遇到类似问题，请告诉大家！这么简单的事情让我困了几个小时！谢谢大家！

【讨论】：

你也可以使用模板字符串来获得更简洁的语法，在我个人看来：getPoints(id) { return `${this.sortedUsers$[id].points}%`;}