Så här använder du jQuery för att låta besökare ändra storlek på webbplatsens teckensnitt

du kan använda jQuery för att ge dina besökare möjlighet att ändra storlek på webbplatsens teckensnitt. Detta är ett användbart gränssnitt att ha, eftersom dina besökare kan förstora eller minska teckensnittets storlek på fritiden, vilket ger dem den bästa läsupplevelsen. Om du inte är bekant med jQuery, kolla in vår jQuery Basics artikel för en förklaring av hur jQuery fungerar.

detta är en interaktiv kod display som visar HTML, CSS, jQuery, och en demo av utgången.

ställa in HTML för att ändra storlek

det första du behöver göra är att ställa in din HTML så att jQuery kan bestämma vad du ska ändra storlek. Om du inte känner till att utrusta ditt HTML-dokument för att referera till jQuery, se vår Få din HTML redo för jQuery-artikel.

först måste du lägga till ett storleksändringsgränssnitt. Oroa dig inte, det här låter mer komplicerat än det faktiskt är. Det här är bara något som dina webbplatsanvändare kan interagera med för att ändra storlek på webbplatsens teckensnitt. Som du kan se i exemplet ovan använde vi länkar som representerades som plus, minus och ordet ”Återställ.”

<a class="increase">+</a><a class="decrease">-</a><a class="reset">reset</a>

varje länk ska ha en klass som representerar åtgärden, som ”öka” eller ”minska.”När vi lägger till jQuery kommer vi att använda dessa klasser för att ange vilken länk som ska öka, minska eller återställa teckenstorleken.

utvärdera nu vilka element eller sektioner du vill ändra storlek. Om det är ett avsnitt kanske du vill skapa en< div > med en klass så att du kan ange ett unikt område som ska ändras.

se Pen jQuery: ändra storlek webbsida typsnitt klass exempel genom Par nätverk (@pairdocs) på CodePen.

i exemplet ovan kan du se att <div> med klassen=”resizable” är markerad för att ändras. Resten av dina stycken påverkas dock inte, såvida du inte anger att alla <p> – element också ska ändras.

jQuery för storleksändring

jQuery hanterar tunga lyft av storleksändring. Om du inte är bekant med jQuery, kolla in vår jQuery Basics artikel för att få ett grepp om de vanliga begreppen.

det första steget är att skapa ett $(dokument).redo funktion som kommer att innesluta alla dina jQuery uttalanden.

$(document).ready(function(){//jQuery statements//jQuery statements});

därefter kommer vi att lägga till det första jQuery-uttalandet för att gå inom denna funktion.

var resize = new Array('element','.class'); resize = resize.join(',');

detta uttalande fastställer vilka element eller klasser som ska ingå i storleksändringen. Dessa element / klasser lagras i variabeln ” ändra storlek.”Om du tittar på exemplet med att ändra storlek på teckensnitt ser du att elementet <p> och klassen ”resizable” valdes för att ändra storlek.

när du har fastställt vilka element eller klasser som kommer att påverkas måste du ställa in koden för att faktiskt ändra teckenstorleken när en besökare interagerar med ditt resizing-gränssnitt.

Återställ teckenstorleken

Under vårt ”var resize” – uttalande kommer vi att lägga till ett uttalande som återställer teckensnittet till sin ursprungliga storlek.

 var resetFont = $(resize).css('font-size'); $(".reset").click(function(){ $(resize).css('font-size', resetFont); });

detta uttalande kallar de element eller klasser du lagrade i variabeln ”ändra storlek” och när länken med klassen ”Återställ” klickas återgår attributet font-size I CSS till sin ursprungliga storlek.

den $(”.återställa”).klick (funktion () kallar klassen ”Återställ” från HTML. Detta gör det möjligt för jQuery att återställa teckenstorleken när användaren interagerar med texten som är associerad med klassen ”Återställ”. I vårt exempel är denna text helt enkelt länken” Återställ”.

öka teckenstorleken

Därefter måste vi lägga till ett uttalande som ökar teckenstorleken. I vårt exempel lade vi till” öka ”- klassen till ” + ”- länken, så vi måste knyta jQuery-åtgärden för att öka storleken till”+”.

detta exempel gör just det.

//specifies that this will affect the "increase" class $(".increase").click(function(){//creates a variable that holds the current font size var originalFontSize = $(resize).css('font-size');//creates a variable that parses the number var originalFontNumber = parseFloat(originalFontSize, 10);//creates a variable that holds the increased font sizevar newFontSize = originalFontNumber*1.2;//changes the font-size in the CSS document $(resize).css('font-size', newFontSize); return false; });

exemplet börjar med att fastställa att detta uttalande är beroende av att en användare klickar på texten som är associerad med klassen ”öka”. Detta är ett ” + ” i vårt exempel. De följande tre raderna lägger till nya variabler: originalFontSize, originalFontNumber, och newFontSize.

originalFontSize samlar in den aktuella teckenstorleken från CSS och lagrar den. originaFontNumber tolkar detta nummer så att jQuery kan läsa det. Sedan tar newFontSize numret som lagras i originalFontNumber och multiplicerar det med 1,2.

sedan går den sista raden in i CSS och ändrar teckenstorleken för att matcha newFontSize.

denna sekvens kommer att köras varje gång ”+” klickas.

minska teckenstorleken

minskningen uttalande är mycket lik den tidigare uttalande. Istället för att multiplicera teckenstorleken med ett tal som ökar det ursprungliga teckensnittsnumret multiplicerar minskningsuttalandet det ursprungliga teckensnittsnumret med ett decimaltal, vilket minskar det.

//specifies that this will affect the "decrease" class $(".decrease").click(function(){//creates a variable that holds the current font size var originalFontSize = $(resize).css('font-size');//creates a variable that parses the number var originalFontNumber = parseFloat(originalFontSize, 10);//creates a variable that holds the decreased font size var newFontSize = originalFontNumber*0.8;//changes the font-size in the CSS document $(resize).css('font-size', newFontSize); return false; });});

denna sekvens kommer att köras varje gång ”-” klickas. Detta minskar teckenstorleken med varje klick.