时间戳

首页 > 解决方案 > 使用参数使用 Javascript 更改 CSS 属性

javascript - 使用参数使用 Javascript 更改 CSS 属性

问题描述

基本上，我希望用户能够选择页面上按钮的颜色。我正在使用 Angular 6 + JS。

现在，我只是在设置原色（因此，只影响具有引导类的按钮.btn-primary

我有一个色轮，它在更改时将十六进制值发送到函数。该函数将十六进制值转换为 rgb，然后使用querySelectorAll收集所有 . btn-primary页面上的按钮。然后它尝试遍历每个按钮并将背景颜色和边框颜色设置为通过参数传递给函数的颜色。

HTML（需要 ngx-color-picker & bootstrap 导入包）：

<button class="btn btn-primary">Save changes</button>
<div class="form-group mt-2">
  <label class="d-block" for="setPrimaryColor">Set primary color</label>
  <input 
    (colorPickerChange)="setPrimaryColor($event)" 
    id="setPrimaryColor" 
    [(colorPicker)]="color" 
    [style.background]="color"
    [cpOutputFormat]='auto'/>
</div>

TS/JS/NG6

heroGradient1 = 'rgba(0, 0, 0, 0.1)';
heroGradient2 = 'rgba(0, 0, 0, 0.8)';
primaryColor: string = '';

setPrimaryColor(color) {
        this.heroGradient1 = this.hexToRgb(color) + ', 0.1)';
        this.heroGradient2 = this.hexToRgb(color) + ', 0.8)';
        this.primaryColor = this.hexToRgb(color);
    
        const primaryBtns = document.querySelectorAll<HTMLElement>('.btn-primary');
        console.log(primaryBtns)
        primaryBtns.forEach(element => {
          element.style.setProperty('background-color', this.primaryColor);
          element.style.setProperty('border-color', this.primaryColor);
        });
}

hexToRgb(hex){
    var c;
    if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
        c= hex.substring(1).split('');
        if(c.length== 3){
            c= [c[0], c[0], c[1], c[1], c[2], c[2]];
        }
        c= '0x'+c.join('');
        return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',');
    }
    throw new Error('Bad Hex');
}

控制台日志确认querySelectorAll正在拾取页面上的所有 btn 原色，但 for 循环不会改变背景或边框颜色。有什么帮助吗？

标签： javascriptcssangularjstypescript

解决方案

1. 您的hexToRgb函数返回损坏的值。你必须关闭括号。

此外，rgba需要 4 个参数（包括 alpha）。更好地使用rgb（虽然 rgba 也可以工作..）

改变

    return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',');

至

    return 'rgb('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+')';

2. 引导.btn-primary类具有!important优先样式。如果你想覆盖它，你也应该有这个优先级。

为此，添加important为setProperty函数的第三个参数。

改变

  element.style.setProperty('background-color', this.primaryColor);
  element.style.setProperty('border-color', this.primaryColor);

至

  element.style.setProperty('background-color', this.primaryColor, 'important');
  element.style.setProperty('border-color', this.primaryColor, 'important');

推荐阅读