Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie passt man Schriftgröße und Zeilenhöhe in JQuery an?

伊谢尔伦
Freigeben: 2017-06-17 09:23:11
Original
4494 Leute haben es durchsucht

Sie müssen mit dem Attribut

font-size vertraut sein. Im Folgenden erfahren Sie, wie Sie mit jquery den Attributwert „font-size“ erhalten dazu.

Erhöhen, verkleinern und wiederherstellen Sie die ursprüngliche Größe der Schriftart auf der HTML-Seite. Die Klassen der Elemente sind resetFont, und ReduceFont in der JQuery 🎜>Ereignis definiert die Klickereignisse von drei Elementen, um die ursprüngliche Größe zu vergrößern, zu verkleinern und wiederherzustellen. Der Beispielcode lautet wie folgt:

JQuery-Implementierung zum Festlegen der Schriftgröße (font-size) und der Zeilenhöhe (
$(function () { 
//取得字体大小,在html标记下定义了font-size 
var originalFontSize = $("html").css("font-size"); 
//恢复默认字体大小 
$(".resetFont").click(function () { 
$("html").css("font-size", originalFontSize); 
//JavaScript不向下执行 
return false; 
}); 
//加大字体,某个元素的class定义为increaseFont 
$(".increaseFont").click(function () { 
//取得当前字体大小 后缀px,pt,pc 
var currentFontSize = $("html").css("font-size"); 
//取得当前字体大小,parseFloat()转为float类型去除后缀 
var currentFontSizeNumber = parseFloat(currentFontSize); 
//新定义的字体大小 
var newFontSize = currentFontSizeNumber * 1.1; 
//重写样式表 
$("html").css("font-size", newFontSize); 
//JavaScript不向下执行 
return false; 
}); 
//减小字体,某个元素的class定义为decreaseFont 
$(".decreaseFont").click(function () { 
//取得当前字体大小 后缀px,pt,pc 
var currentFontSize = $("html").css("font-size"); 
//取得当前字体大小,parseFloat()转为float类型去除后缀 
var currentFontSizeNumber = parseFloat(currentFontSize); 
//重新定义字体大小 
var newFontSize = currentFontSizeNumber * 0.9; 
//重写样式表 
$("html").css("font-size", newFontSize); 
//JavaScript不向下执行 
return false; 
}); 
});
Nach dem Login kopieren
line-height

)

                                                                                    

Das obige ist der detaillierte Inhalt vonWie passt man Schriftgröße und Zeilenhöhe in JQuery an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage