Angular：使用 css 變量更改字體大小正在應用，但不會在瀏覽器中反映某些字段
[英]Angular: Changing font-size using css variables is applying but not reflecting in browser for certain fields
問題描述
我將 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>
4 個解決方案
解決方案1
2 2020-11-12 18:58:22
您不應該通過直接訪問來修改您的 html 代碼。 例如，這可能會使您的應用程序容易受到 XSS 攻擊。
相反，Angular 團隊推薦使用Renderer2 。
獲取您的代碼並修改它以使用它，將導致以下結果：
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
2 2020-11-16 21:22:17
出於好奇，您為什么要這樣做，而不是簡單地使用具有所需文本大小的類？
無論哪種方式，看起來您的值都沒有被應用，因為您的選擇器不夠具體。
為了糾正這個問題，你可以用這樣的東西來制作一個人為的特定選擇器：
html > body * { // rules }
解決方案3
1 2020-11-19 08:02:36
為什么不使用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
1 已采納 2020-11-19 11:10:49
問題已通過移動解決
:host-context(.mediumFont) {
--fontSize: 11px;
}
:host-context(.largeFont) {
--fontSize: 12px;
}
:host-context(.smallFont) {
--fontSize: 10px;
}
從app.component.scss到styles.scss 。 因為彈出窗口不是app.compontnet.html的一部分， app.compontnet.html它們呈現在它之外。
CSS字體大小繼承不適用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.