javascript - nativeElement.style 上的所有属性都是空的

Question

我正在尝试创建一个将根据所选元素的宽度调整大小的选择。

这是 jQuery/Javascript 中的实现:Drop down list width fit selected item text

我遇到的问题是样式总是空的。如果我尝试将 mainSelectElement 设置为 hiddenSelectElement，它几乎消失了。原因是 nativeElement.style.width 为空。我将样式属性记录到控制台，每个属性都是空白的。我们也有全局样式应用于选择，但这些也没有出现。

有谁知道为什么我的样式是空白的？这与影子 DOM 有关系吗？最重要的是，有什么解决方案吗？

import { Component, Input, Output, EventEmitter, forwardRef, ViewChild, ElementRef, Renderer } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

const SELECT_RESIZE_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useClass: forwardRef(() => SamSelectResizableComponent),
  multi: true
}

@Component({
  selector: 'sam-select-resizable',
  template: `
    <select #mainSelectElement [ngModel]="selected" (ngModelChange)="updateSelected($event)">
      <ng-content></ng-content>
    </select>

    <select #hiddenSelectElement>
      <option >{{selected}}</option>
    </select>
  `,
  providers: [
    SELECT_RESIZE_VALUE_ACCESSOR
  ]
})
export class SamSelectResizableComponent implements ControlValueAccessor {

  @ViewChild('hiddenSelectElement') hiddenSelectElement: ElementRef;
  @ViewChild('mainSelectElement') mainSelectElement: ElementRef; 

  public selected: any;

  private onChangeCallback: (_: any) => void = (_: any) => {};
  private onTouchedCallback: () => void = () => {};

  get value(): any {
    return this.selected;
  }

  set value(val: any) {
    if (val !== this.selected) {
      this.selected = val;
      this.onChangeCallback(this.selected);
    }
  }

  constructor(private renderer: Renderer) {}

  updateSelected(event) {
    this.selected = event;
    const hiddenWidth = this.hiddenSelectElement.nativeElement.style.width;
    this.renderer.setElementStyle(this.mainSelectElement.nativeElement, 'width', hiddenWidth);
  }

  writeValue(value: any) {
    if (value !== this.selected) {
      this.selected = value;
      this.onChangeCallback(this.selected);
    }
  }

  registerOnChange(fn: any) {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any) {
    this.onTouchedCallback = fn;
  }
}

Answer 1

这是在应用样式后获取样式的一些好方法。对于任何 HTML 元素，最初所有样式属性都是空的。

window.getComputedStyle() 可能会解决您的问题。

// fetch styles for an element
style = window.getComputedStyle(hiddenSelectElement.nativeElement, null);

// fetch the property values for any style attribute
console.log(style.getPropertyValue("width"));

对于像 ::before 和 ::after 这样的伪元素

// fetch styles for an element
style = window.getComputedStyle(hiddenSelectElement.nativeElement, ':before');

// fetch the property values for any style attribute
console.log(style.getPropertyValue("width"));

引用:https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle