Style Sheets (Dynamic Method)

[Total: 0    Average: 0/5]

This file shows how to dynamically access and update the style methods of the different items on your HTML page.

Head Code:

<style type=text/javascript>
tags.H1.color=tags.H2.color="blue"
tags.H1.fontStyle=tags.H2.fontStyle="italic"
tags.H4.textAlign="center"
tags.H4.fontSize="5em"
tags.H4.color="silver"

classes.WARNING.all.fontWeight="bold"
classes.WARNING.all.backgroundColor="orange"
classes.WARNING.all.marginLeft="1in"
classes.WARNING.all.marginRight="1in"
classes.WARNING.all.borderWidth="8px"
classes.WARNING.all.borderColor="green"
classes.WARNING.all.borderStyle="solid"

contextual(classes.WARNING.all,tags.H1).textAlign="center"
contextual(classes.WARNING.all,tags.H2).textAlign="center"

ids.P23.textAlign="right"
ids.P23.textTransform="uppercase"
ids.P23.color="#00FF00"
tags.BODY.backgroundColor="#000000"
tags.BODY.color="#FF0000"
</style>
<script type=text/javascript>
function startIE() {
  if(!document.all) {
    alert("YOU ARE NOT USING IE!")
	return
  }
  document.body.style.backgroundColor="#EEEEEE"
  document.all.a1.style.color="silver"
  document.all.a1.style.fontSize="xx-large"
  document.all.a1.style.textAlign="center"
  document.all.a2.style.color="red"
  document.all.a3.style.color="blue"
  document.all.a3.style.fontWeight="bold"
  document.all.a3.style.backgroundColor="orange"
  document.all.a3.style.marginLeft="1in"
  document.all.a3.style.marginRight="1in"
  document.all.a3.style.borderWidth="8px"
  document.all.a3.style.borderStyle="solid"
  document.all.a3.style.borderColor="green"
  document.all.a4.style.color="black"
  document.all.a5.style.color="green"
  document.all.a5.style.textTransform="uppercase"
  document.all.a5.style.textAlign="right"
}
</script>

Body Code:

<div id=a1>Style...</div>
<div id=a2><span class=desc>
This is how NETSCAPE does it's JavaScript CSS
INTERNET EXPLORER does it entirely differently!
(so this appears as all black text left aligned in IE)
<br><a href="#" onClick="startIE();return false">Click Here To Start IE's CSS</a>
<br>You may notice (if you use both NS and IE) that there is a black box space=1 inserted
<br>between the orange box and the green border. Only NS does this....</span><BR>
</div>
<div class=warning id=a3><span class=desc>
<h2>Danger - Warning</h2></span>
<div id=a4><span class=desc>This is your notification!<BR>Notice the text size,style,placement,color as well as the border and background.</span></div>
</div>
<div id=a5>
<p id=p23><span class=desc>
This paragraph is right aligned<br>
and appears in uppercase LeTers.<BR></span>
<span style="text-transform: none"><span class=desc>Here we explicitly use an inline style to override ther uppercase letters.
</span></span>
</p>
</div>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *