css 如何动态更改图像某些部分的颜色和字体[已关闭]

b5buobof 于 2023-05-19 发布在其他

关注(0)|答案(1)|浏览(208)

已关闭，此问题为opinion-based。目前不接受答复。
**想改善这个问题吗？**更新问题，以便editing this post可以用事实和引用来回答。

8天前关闭
Improve this question
我正在寻找一般的建议，什么会更容易有一个更动态的图像在我的html页面。
基于Angular 的 Jmeter 板项目，允许用户在浏览器中配置其移动的应用程序的屏幕。
用户可以配置屏幕的所有背景/颜色和字体
场景：
在配置过程中，用户应该能够看到动态图像，该图像是其在移动的应用程序中显示方式的副本。基本上，我们应该动态地改变颜色和字体的一部分，因为他的形象配置。我们有超过50+可能的屏幕。如屏幕截图所示，它们是使用完全不同的元素显示的示例2屏幕。

**首屏：**x1c 0d1x

方法：
1.我们是否应该为所有的屏幕创建svg，并手动为html中的每个部分添加颜色和字体？
1.为所有这些屏幕创建html组件。
1.有没有其他通用的方法，不过于复杂的编辑？
我曾手动尝试通过html制作它，但对于包含大量元素的复杂屏幕来说，它肯定会变得乏味。有没有一个简单的方法来确保它不会变得过于复杂，只是svg/html的方法？

css

来源：https://stackoverflow.com/questions/76218676/how-to-change-color-and-font-of-certain-parts-of-the-image-dynamically

1条答案

按热度按时间

r6hnlfcb1#

我觉得最好的办法是使用css变量
检查this SO中Gautam的响应
您需要选择存储“变量”的位置。如果使用API或Json或localHost
例如，使用localhost。例如，如果我们有一些

h1{
  color:var(--background-color-1,"silver")
}

我们可以有两个输入

<input [(ngModel)]="color1">
<input [(ngModel)]="color2">
<button (click)="submit()">subit</button>

在您的组件中

ngOnInit() {
    const colors = localStorage.getItem('colors');
    const res = JSON.parse(colors);
    this.setColors(res);
  }
  submit() {
    const obj = {
      '--background-color-1': this.color1,
      '--background-color-2': this.color2,
    };

    localStorage.setItem('colors', JSON.stringify(obj));

    this.setColors(obj);
  }
  setColors(res) {
    Object.keys(res).forEach((key) => {
      document.documentElement.style.setProperty(key, res[key]);
    });
  }

stackblitz

赞(0）回复(0）举报 2023-05-19

我来回答

css 如何动态更改图像某些部分的颜色和字体[已关闭]

1条答案

相关问题

热门标签

最新问答