PDA

View Full Version : change css font size with javascript?

dmm1285
06-17-2001, 07:26 PM
i have tried div_id.style.font.size but that does not seem to work, how do you do it?

edit: div_id.style.font changes the size, but gives me an error while doing so
petervazed
06-17-2001, 07:38 PM
Is this where you are looking for?
------
The nest step in enhancing the presentation of the document is to force some aesthetically grand text over-lay effects. Adding the text and highlight CLASS descriptions into the style sheet definition defines two styles. By using the negative top-margin property in the highlight class, text specified as using this class can be over-laid on other text.


<HTML>
<HEAD>
<TITLE>The HTML Reference Library</TITLE>
<STYLE>
BODY { background : #006000}
P.main { font-family : Arial;
font-size : 12pt;
color : white}
P.info { font-family : Arial;
font-style : italic;
color : #80C000}
P SPAN { font-style : italic;
font-size : 14pt}
A { color : #C0C8FF;
font-weight : bold}
.text { color: red;
margin-left: 10px;
font-size: 28px;
font-family: Arial Black }
.highlight { margin-top: -38px;
margin-left: 8px;
color: darkred;
font-size: 28px;
font-family: Arial Black }
</STYLE>
</HEAD>
<BODY>
<P CLASS="main"><DIV CLASS="text" STYLE="{color : white; font-style : italic}">The HTML Reference Library</DIV>
<DIV CLASS="highlight" STYLE="{color : gray; font-style : italic}">The HTML Reference Library</DIV>
<P CLASS="main">is a Windows HLP file, detailing all currently useable HTML syntax. It is available in the following formats :
<UL>
<LI><DIV CLASS="text">Windows 3.x</DIV>
<DIV CLASS="highlight">Windows 3.x</DIV>
<LI><DIV CLASS="text" STYLE="{color : blue"}>Windows 95/NT</DIV>
<DIV CLASS="highlight" STYLE="{color : darkblue"}>Windows 95/NT</DIV>
</UL>
<P CLASS="info">For more information about the <SPAN>HTMLib</SPAN>, contact <A HREF=" htmlib@htmlib.demon.co.uk <mailto:htmlib@htmlib.demon.co.uk>mailto:htmlib@htmlib.demon.co.uk">htmlib@htmlib.demon.co.uk</A>
</BODY>
</HTML>
======
dmm1285
06-17-2001, 07:46 PM
no, i mean what is the javascript object name of the css elemtn font size. example:

.style{ position : absolute; top : 300}

div_id.style.top = ypos
ypos = 500

this will move the contained <div class="style"></div> too 500 down, overriding the the css value of 300.
kdjoergensen
06-18-2001, 04:40 PM
To go to www.dannyg.com and download his roadmap.
(or buy his excellent Javascript Bible version 4). He has an excellent overview.

in newer browsers (MSIE 4/5 + Netscape 6) you can change style settings by script. Usually the font name is oneWord keywords (without hypens) and which are inter-capatalized.

e.g.
font-style: bold; becomes: fontStyle
font-size: 10px; becomes: fontSize
margin-left: 2px; becomes: marginLeft

e.g. to change font size of a div element:

var myDiv = document.all["divName"];
// in Microsoft Internet Explorer
var myDiv = document.getElementById("divName");
// in Netscape 6

myDiv.style.fontSize = 16;
myDiv.style.backgroundColor = "red";
myDiv.style.fontWeight = "bolder";
myDiv.style.color = "blue";
etc

as mentioned Danny Goodman has a list of almost all of these style settings which are exposed to script and also showing in which browsers they are supported.

Kenneth
dmm1285
06-18-2001, 10:28 PM
thank you very much, this is exactly what I have been looking for.