Jump to content

Changing CSS fonts with JavaScript

Lee-yoshi

By Lee-yoshi
in JavaScript

Recommended Posts

Lee-yoshi Newbie

Lee-yoshi

Posted
Posted

Hey guys! Another stupid problem from yours truely :-( I've created a StyleSheet with a few custom paragraph styles (Such as below):

p.n_textheader {font-size: 15em; font-weight: bold; margin: 0px;}

The StyleSheet is linked to the .php file all fine, but how can I change the font-size element using JavaScript in my .php file? I've tried things like

  document.getElementById( "n_textheader" ).style.fontSize;document.getElementById( "p.n_textheader" ).style.fontSize; document.getElementById( "p" )( "n_textheader" ).style.fontSize;document.getElementByTagName( "n_textheader" ).style.fontSize; document.getElementById( "n_textheader" ).style.font-size;

...but alas, no joy :-( Any help, greatly appreciated as always :-) Thanks!

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

you are trying to target a paragraph element with classname with getElementById that targets a id element ref and getElementsByTagName that only targets the tag name of "p" or "div", and you not changing the css, you applying a inline style to the element which will take priority over css styling in the head of the document, or external css stylesheet UNLESS they are using !important, you need a script that combines both parent_elem = document.body; will target all p elements with class name "n_textheader" parent_elem = document.getElementById("content2"); will only target p elements with class name "n_textheader" within a parent element with id ref content2. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">body{background-color:#FFF;}p{margin: 0.5em 0; font-size: 20px;}.em_icons { position:relative; top:4px; height:1em;}</style><script type="text/javascript">/*<![CDATA[*//*---->*/window.onload=function(){//parent_elem = document.body;parent_elem = document.getElementById("content2");child_elements=parent_elem.getElementsByTagName("p");for(i=0;i<child_elements.length;i++){if(child_elements[i].className=="n_textheader"){child_elements[i].style.fontSize="50px";}}}/*--*//*]]>*/</script></head><body><div id="content"><p class="n_textheader">I'm flying to Ghana on 27th October and will be there for a month :-D - anyone else going around that time? If so I'd love to hear from you :-) </p><p>I'm flying to Ghana on 27th October and will be there for a month :-D - anyone else going around that time? If so I'd love to hear from you :-) </p><p class="n_textheader">I'm flying to Ghana on 27th October and will be there for a month :-D - anyone else going around that time? If so I'd love to hear from you :-) </p><p>I'm flying to Ghana on 27th October and will be there for a month :-D - anyone else going around that time? If so I'd love to hear from you :-) </p></div><div id="content2"><p>I'm flying to Ghana on 27th October and will be there for a month :-D - anyone else going around that time? If so I'd love to hear from you :-) </p><p class="n_textheader">I'm flying to Ghana on 27th October and will be there for a month :-D - anyone else going around that time? If so I'd love to hear from you :-) </p><p>I'm flying to Ghana on 27th October and will be there for a month :-D - anyone else going around that time? If so I'd love to hear from you :-) </p><p class="n_textheader">I'm flying to Ghana on 27th October and will be there for a month :-D - anyone else going around that time? If so I'd love to hear from you :-) </p></div></body></html>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...