字体大小增加减少按钮使用angular 7
字体大小增加减少按钮使用angular 7
提问于 2019-07-02 17:31:21
尝试做递增和递减字体大小的整个页面的角度应用程序。angular中的搜索功能没有找到任何解决方案谁能告诉我如何使用下面的函数来做这件事
$(document).ready(function(){
var originalSize = $('div').css('font-size');
// reset
$(".resetMe").click(function(){
$('div').css('font-size', originalSize);
});
// Increase Font Size
$(".increase").click(function(){
var currentSize = $('div').css('font-size');
var currentSize = parseFloat(currentSize)*1.2;
$('div').css('font-size', currentSize);
return false;
});
// Decrease Font Size
$(".decrease").click(function(){
var currentFontSize = $('div').css('font-size');
var currentSize = $('div').css('font-size');
var currentSize = parseFloat(currentSize)*0.8;
$('div').css('font-size', currentSize);
return false;
});
});有人能告诉我如何在angular 7上添加这个吗？
<input type="button" class="increase" value=" + ">
<input type="button" class="decrease" value=" - "/>
<input type="button" class="resetMe" value=" = ">回答 3
Stack Overflow用户
发布于 2019-07-02 17:39:16
你应该尽量不要在Angular中使用jQuery。有一种角度的方法来做这件事。
您可以使用ViewChild访问HTML内容。然后，您可以访问nativeElement上的style属性。此样式属性的类型为CSSStyleDeclaration，并且具有所有的CSS样式属性。只需从那里更改即可。
在这里，试一下这个：
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
fontSize = 14;
@ViewChild('para', { static: true }) para: ElementRef;
changeFont(operator) {
operator === '+' ? this.fontSize++ : this.fontSize--;
(this.para.nativeElement as HTMLParagraphElement).style.fontSize = `${this.fontSize}px`;
}
}在模板中：
<p #para>
Start editing to see some magic happen :)
</p>
<button (click)="changeFont('+')">+</button>
<button (click)="changeFont('-')">-</button>这是你的推荐人的。
Stack Overflow用户
发布于 2019-07-02 17:47:17
也许你应该选择一个完整的角度解决方案，而不需要jQuery，这对于这类事情实际上是无用的。
不管怎样，这是组件代码
const DEFAULT_FONT_SIZE = 16;
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
fontSize: number;
constructor(){
this.fontSize = DEFAULT_FONT_SIZE;
}
decrease(){
this.fontSize = (this.fontSize * 0.8);
}
increase(){
this.fontSize = (this.fontSize * 1.2);
}
reset(){
this.fontSize = DEFAULT_FONT_SIZE;
}
}正如您所看到的，我正在设置一个对重置部分有用的DEFAULT_FONT_SIZE，并且我并没有因为这个HTML而修改CSS
<p [style.fontSize.px]="fontSize">
Start editing to see some magic happen :)
</p>
<button type="button" (click)="increase()">
Increase
</button>
<button type="button" (click)="decrease()">
Decrease
</button>
<button type="button" (click)="reset()">
Reset
</button>如你所见，字体大小与px值上的样式绑定绑定到Angular (你可以使用你喜欢的格式)
所以它简单地变成了这样：
<p [style.fontSize.px]="fontSize">
Start editing to see some magic happen :)
</p>看看这个
Stack Overflow用户
发布于 2019-07-02 17:45:30
您可以使用[ngStyle]的angular内置属性指令来完成此任务。
[ngStyle]用于根据表达式添加/删除CSS样式属性。
在你的component.ts里。声明一个fontSize变量，根据按钮点击增减值；
fontSize = 14;
changeFontSize(isIncrement) {
fontSize = (isIncrement) ? fontSize++ : fontSize--;
}在组件HTML中，[ngStyle]接受一个对象作为输入值，该对象具有键-值对，键是CSS属性名称，值是属性值。
<p [ngStyle]={'fontSize': fontSize + 'px'}>
Hello, font size test.
</p>
<button (click)="changeFontSize(true)">Increase</button>
<button (click)="changeFontSize(false)">Decrease</button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56849359
复制相关文章
相似问题
腾讯云开发者
