Angular: изменение размера шрифта с помощью переменных css применяется, но не отражается в браузере для определенных полей

ProgramBox

Angular: изменение размера шрифта с помощью переменных css применяется, но не отражается в браузере для определенных полей

Post author:admin
Запись опубликована:21 февраля, 2023
Post category:Вопросы по программированию

#html #css #angular #typescript #css-variables

#HTML #css #angular #typescript #css-переменные

Вопрос:

Я использую переменные CSS для функции, в которой у пользователя есть возможность изменить размер шрифта на маленький, средний или большой. Таким образом, для большинства полей он работает так, как ожидалось. Но для определенных полей значение применяется, но не отражается

 :host-context(.mediumFont) {
    --fontSize: 11px;
}
:host-context(.largeFont) {
    --fontSize: 12px;
}
:host-context(.smallFont) {
    --fontSize: 10px;
}

 refClassArray: RefClassInterface[] = [
        { class: 'font-small', refClass: 'smallFont' },
        { class: 'font-medium', refClass: 'mediumFont' },
        { class: 'font-large', refClass: 'largeFont' },
    ];
defaultFontSize = 'mediumFont';

changeFontSize(selector: string) {
        this.defaultFontSize = selector;
        let docBody = document.body;
        console.log(document.getElementById(selector));
        docBody.classList.add(selector);
        this.refClassArray.forEach((refClass: RefClassInterface) => {
            if (selector !== refClass.refClass) {
                docBody.classList.remove(refClass.refClass);
                document.querySelector('#'   refClass.refClass).setAttribute('style', 'font-weight: normal;'   'pointer-events: auto;');
            } else {
                document.querySelector('#'   refClass.refClass).setAttribute('style', 'font-weight:'   'bold;'   'pointer-events: none;');
            }
        });
        this.ieStyles.iEfont(selector);
    }

Выше приведена логика, которую я использую.

Первый рисунок взят из элемента, который работает нормально. Когда я навожу курсор на --font-size , 11px отражается. Второй — это тот, где он работает не так, как ожидалось, и когда я навожу курсор на --font-size ничего не появляется. И оба эти элемента находятся внутри <body>

Ответ №1:

Вы не должны изменять свой html-код через прямой доступ. Это может сделать ваше приложение уязвимым, например, для XSS-атак.

Вместо этого команда Angular рекомендует использовать средство визуализации 2.

Использование вашего кода и его изменение для его использования приведет к следующему:

 refClassArray: RefClassInterface[] = [
        { class: 'font-small', refClass: 'smallFont' },
        { class: 'font-medium', refClass: 'mediumFont' },
        { class: 'font-large', refClass: 'largeFont' },
    ];
defaultFontSize = 'mediumFont';

changeFontSize(selector: string, indexOfClassToAdd: number) {
  this.defaultFontSize = selector;
  const el: Element = document.getElementById(selector));
  // Iterate each class in the list to remove it.
  this.refClassArray.forEach((refClass: RefClassInterface) => {
    // Remove the class from the specific element only if its present.            
    if (el.classList.contains(refClass.refClass) {
      this.renderer2.removeClass(el, refClass.refClass);
    };
  });
  this.renderer2.addClass(el, refClassArray[indexOfClassToAdd].refClass);
};

Это будет означать, что вы знаете, что class должно быть применено (и оно присутствует в style.scss или и соответствующем файле scss).

С уважением.

Ответ №2:

Из любопытства, почему вы делаете это таким образом, а не просто используете класс с желаемым размером текста?

В любом случае, похоже, что ваше значение не применяется, потому что ваш селектор недостаточно конкретен.

Чтобы исправить это, вы могли бы создать искусственно определенный селектор с чем-то вроде этого:

html > body * { // rules }

1. Я делаю это так, потому что у меня есть меню, заголовок, экран (где отображаются данные и требуется изменение шрифта) и нижний колонтитул. И требуется изменить размер шрифтов, отображающих данные. заголовок таблицы, заголовок раздела и т. Д. Изменять не следует.

Ответ №3:

Почему бы не использовать ngClass ? Определите три класса

 .font-small{
    fontSize: 10px
}
.font-medium{
    fontSize: 11px
}
.font-large{
    fontSize: 12px
}

Привязать что-то к пользовательскому выбору, например userChoice: SizeEnum , или что-то в этом роде

Затем в вашем элементе данных используйте ngClass для привязки

 ngClass = "{
 'font-small': userChoice === sizeEnum.small,
 'font-medium': userChoice === sizeEnum.medium,
 'font-large': userChoice === sizeEnum.large
}"

Ответ №4:

Проблема была решена путем перемещения

 :host-context(.mediumFont) {
    --fontSize: 11px;
}
:host-context(.largeFont) {
    --fontSize: 12px;
}
:host-context(.smallFont) {
    --fontSize: 10px;
}

от app.component.scss до styles.scss . Поскольку всплывающие окна не являются частью app.compontnet.html , они отображаются вне его.