Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • How To Resize-Text-with-HTML-and-Javascript How

    Загружено:

    xs
    18 просмотров5 страниц

    Оригинальное название

    How to Resize-Text-with-HTML-and-Javascript how.doc

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    TXT, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    © All Rights Reserved
    Скачайте в формате TXT, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    18 просмотров5 страниц

    How To Resize-Text-with-HTML-and-Javascript How

    Загружено:

    xs

    Авторское право:

    © All Rights Reserved
    Скачайте в формате TXT, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 5

    This is first line of comment

    MESSAGES
    LOG IN
    EXPLORE
    HELP US
    EDIT

    wikiHow logo

    Home
    Categories
    Computers and Electronics
    Software
    Web Programming
    JavaScript

    Article
    Edit

    Learn why people trust wikiHow


    How to Resize Text with HTML and Javascript
    Author Info

    Updated: October 14, 2019

    Explore this Article


    Steps
    Ask a Question
    Related Articles

    Letting the user adjust the font size of your website makes the page easier for
    them to read and more accessible. Here is how to implement this feature using HTML
    and Javascript.
    Steps

    1
    Create the HTML page if you haven't already. If you just want to learn and
    don't have a project you need resizable text for, a simple HTML page with some text
    on it will be enough.
    2
    Add buttons for text resizing. You can add buttons with the <button> tag. Make
    one button for increasing font size, and one button for decreasing it. When
    clicked, both buttons should call the function for resizing text (you'll write it
    later), but with different arguments: the button for increasing font size should
    pass a positive number as the argument; the button for decreasing it a negative
    number.

    <button alt="Bigger text"


    title="Bigger text"
    onclick="changeTSize(1);">
    A+
    </button>
    <button alt="Smaller text"
    title="Smaller text"
    onclick="changeTSize(-1);">
    A-
    </button>
    3
    Add a <script> tag. This tag is usually put either at the bottom or at the top
    of the body section. Putting it at the top would affect website loading time if you
    had a longer script, but where you place this script won't appreciably affect the
    page loading time. The Javascript code for resizing text will be inside these tags.
    Remember to close with a </script> tag.
    4
    Declare the text resizing function inside the script section. This function
    takes one argument — how much the font size should be increased.

    function changeTSize(nu) {
    }

    5
    Get the <body> element. Use the getElementsByTagName() with "body" as argument,
    then take the first element of the resulting list because there is only one body
    element on the page.

    var el = document.getElementsByTagName('body')[0];

    6
    Obtain the current font size. Use the getComputedStyle() function to avoid
    needing to directly access and modify stylesheets, which can be complicated and is
    not supported by all browsers. You can obtain the value of the font-size style
    attribute using getPropertyValue(), but that returns a string. You need to convert
    that string to a float using the parseFloat() function before using it somewhere.

    var fontSizeString = window


    .getComputedStyle(el, null)
    .getPropertyValue('font-size');
    var fontSize = parseFloat(fontSizeString);

    7
    Set the new font size. For this, assign a new value to the fontSize attribute
    of the style attribute of the body element. That value should be the sum of the
    previous value and the argument that was passed to the resizing function. This way,
    if the argument is negative, it will be subtracted and the font size will become
    smaller.

    el.style.fontSize = (fontSize + nu) + 'px';

    8
    Do the same thing for every button. Changing the font size of the body changes
    it for most text on the page, but not for buttons. You have to set it separately
    for each button. Since there are many buttons, use a loop to set the value for each
    one.

    for (var i = 0; i < els.length; i++) {


    fontSizeString = window
    .getComputedStyle(els[i], null)
    .getPropertyValue('font-size');
    var fontSize = parseFloat(fontSizeString);
    els[i].style.fontSize = (fontSize + nu) + 'px';
    }

    9
    Check your HTML file. It should now include the following code:

    <body>
    <!-- Any page code that comes before the buttons -->
    <button alt="Bigger text"
    title="Bigger text"
    onclick="changeTSize(1);">
    A+
    </button>
    <button alt="Smaller text"
    title="Smaller text"
    onclick="changeTSize(-1);">
    A-
    </button>
    <!-- Any page code that comes after the buttons -->
    <script>
    function changeTSize(nu) {
    var el = document.getElementsByTagName('body')[0];
    // only one body in document
    var fontSizeString = window
    .getComputedStyle(el, null)
    .getPropertyValue('font-size');
    var fontSize = parseFloat(fontSizeString);
    el.style.fontSize = (fontSize + nu) + 'px';
    // Must be done separately for buttons:
    var els = document.getElementsByTagName('button');
    for (var i = 0; i < els.length; i++) {
    fontSizeString = window
    .getComputedStyle(els[i], null)
    .getPropertyValue('font-size');
    var fontSize = parseFloat(fontSizeString);
    els[i].style.fontSize = (fontSize + nu) + 'px';
    }
    }
    </script>
    </body>

    10
    Make sure that the website can be read easily when resized. It should wrap text
    instead of scrolling horizontally, as horizontal scrolling is inconvenient to the
    user. Make sure that no text is truncated or obscured after resizing.
    There are reasonable limits. You don't have to ensure it functions for
    extremely large font sizes, although it's good if you can. The WCAG 2.1 (Web
    Content Accessibility Guidelines), for example, require that text can be scaled up
    to 200% –twice its original height and width– without loss of functionality.

    Community Q&A
    Ask a Question
    Submit
    Related wikiHows

    How to
    Set a Background Image in HTML

    How to
    Insert Spaces in HTML

    How to
    Insert Images with HTML

    How to
    Set Background Color in HTML
    How to
    Create a Simple Web Page with HTML

    How to
    Change Text Color in HTML

    How to
    Create an Email Link in HTML

    How to
    Insert a Line in HTML

    How to
    Create a Dropdown Menu in HTML and CSS

    How to
    Run a HTML File

    How to
    Change the Button Color in HTML

    How to
    Center an Image in HTML

    How to
    Set Image Width and Height Using HTML

    How to
    Comment in HTML
    Article Info

    wikiHow is a “wiki,” similar to Wikipedia, which means that many of our articles
    are co-written by multiple authors. To create this article, volunteer authors
    worked to edit and improve it over time. This article has also been viewed 1,903
    times.

    Categories: JavaScript | HTML

    Print
    Edit
    Send fan mail to authors

    Thanks to all authors for creating a page that has been read 1,903 times.
    Is this article up to date?

    About This Article


    How helpful is this?
    Co-authors: 4
    Updated: October 14, 2019
    Views: 1,903
    Related Articles

    How to
    Set a Background Image in HTML

    How to
    Insert Spaces in HTML
    How to
    Insert Images with HTML

    How to
    Set Background Color in HTML

    Home About wikiHow Jobs Terms of Use Site Map Mobile view

    Вам также может понравиться