control font size in a <div> using DOM

Posted on 2006-06-07
Last Modified: 2013-12-03
I want to be able to increae and decrease the font size for all defined styles within a <div>.
I want the controls to only change the size in the specified ,div> and  no where else.

    .one {
      font-family: arial;
      color: #666;
    .two {
      font-family: arial;
      color: #66F;
    .control {
      font-family: arial;
      font-size: 1.3em;
      font-style: bold;
      color: #00F;
      text-decoration: none;
    .control:hover {
      color: #900;
    .static {
      font-family: arial;
      color: #66F;
    <div id='zoom' style='width:250px;padding:50px;margin:auto;border:1px solid #888;'>
      <p class='one'>Class one characteristics are shown here.</p>
      <p class='two'>Class two characteristics are shown here.</p>
    <p class='static' align='center'>ZOOM&nbsp;<a class='control' href=# onclick='[all]="+1"'>+</a>&nbsp;&nbsp;<a class='control' href=# onclick='[all].font-size="-1"'>-</a>


Question by:Belshe
    LVL 2

    Accepted Solution


    try this.

    <!-- Ur login DIV-->
    <DIV class="login" id="login" style="BACKGROUND-POSITION: center center; FONT-SIZE: 11px; Z-INDEX: 105; LEFT: 666px; BACKGROUND-IMAGE: url(images/login.gif); WIDTH: 126px; CURSOR: hand; COLOR: white; PADDING-TOP: 3px; BACKGROUND-REPEAT: no-repeat; FONT-FAMILY: Verdana, Arial; POSITION: absolute; TOP: 41px; HEIGHT: 20px; TEXT-ALIGN: center; TEXT-DECORATION: none"  onmouseover="fontchange(this,true);" onmouseout="fontchange(this,false);" runat="server">Login</DIV>

    // Ur script DIV //
    function fontchange(row, highlight)
    if (highlight)
     var css =';';'FONT-FAMILY: Verdana;FONT-SIZE: 12px;FONT-WEIGHT: bold;';
    var css =';';'FONT-FAMILY: Verdana;FONT-SIZE: 11px;FONT-WEIGHT: normal;';

    LVL 14

    Assisted Solution

    > I want to be able to increae and decrease the font size for all defined styles within a <div>.
    > I want the controls to only change the size in the specified ,div> and  no where else.

    by standard you can get the value for your style-Element attribute with

    var fontzoom = document.getElementById("zoom").style.fontSize;

    or you can set a value with

    document.getElementById("zoom").style.fontSize = "9em";    // Example

    Problem is that you have two different in <p>-styles within your <div> style, that you'd like
    to change by assigning value to one single property (<div> element), which doesn't work.
    You'd have to design a function, which gets the style property of each <p>-class element,
    does increase the values and set property of each element anew.

    A DOM function that would increase font-size of several given elements in one go is unknown to me though.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    Problem to be resolved in this article Currently, development of website and web application can be done without writing thousands of lines of programming code by hand. Description This can be done through by using a open source framework such …
    Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
    This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
    The viewer will learn how to count occurrences of each item in an array.

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now