Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

control font size in a <div> using DOM

Posted on 2006-06-07
4
Medium Priority
?
1,243 Views
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.

<html>
  <head>
    <style>
    .one {
      font-family: arial;
      font-size:.7em;
      color: #666;
      }
    .two {
      font-family: arial;
      font-size:.9em;
      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;
      font-size:.9em;
      color: #66F;
      }
    </style>
  </head>
  <body>
    <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>
    </div>
    <p class='static' align='center'>ZOOM&nbsp;<a class='control' href=# onclick='document.zoom.style.font-size[all]="+1"'>+</a>&nbsp;&nbsp;<a class='control' href=# onclick='document.zoom.style[all].font-size="-1"'>-</a>
  </body>
</html>

curt


0
Comment
Question by:Belshe
2 Comments
 
LVL 2

Accepted Solution

by:
mbip2000 earned 1000 total points
ID: 16855630
hi,

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 = row.style.cssText+';';
 row.style.cssText=css+'FONT-FAMILY: Verdana;FONT-SIZE: 12px;FONT-WEIGHT: bold;';
}
else
{
var css = row.style.cssText+';';
row.style.cssText=css+'FONT-FAMILY: Verdana;FONT-SIZE: 11px;FONT-WEIGHT: normal;';
}
}

MBip
0
 
LVL 14

Assisted Solution

by:xberry
xberry earned 1000 total points
ID: 16856364
> 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.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
Ready to get certified? Check out some courses that help you prepare for third-party exams.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Suggested Courses
Course of the Month14 days, 11 hours left to enroll

578 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