动态改变 CSS 样式高度

Posted 2023-03-06

【中文标题】动态改变 CSS 样式高度

【英文标题】：Dynamically change CSS style height

【发布时间】：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 作为块或内联块元素？

【参考方案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%`;