RE: Cascading Style Sheets

IE4 currently does not expose the rules and values set in a global style
sheet (you can add new rules at any time). Below explains how to
manipulate elements positioned by global style sheets.

For every element in the document, (you will need to wait for beta 2),
we expose an offsetTop and offsetLeft property that returns the position
of the element. For elements that are rectangular (eg, absolute
positioned elements) you also get an offsetWidth and offsetHeight
property. 

Through these properties you have access to the position of any element,
and the size of any rectangular element offset from its parent
coordinate system (consistent with CSS-P). For elements that are
position: relative or position: absolute, you can assign a new position
using the style property on the element (you effectively are assigning
the in-line style that overrides the global stylesheet).

If you want to quickly reposition a group of elements, you can add a new
global rule to the stylesheet (there is a stylesheets collection
representing all the global stylesheets - addRule is a method on
individual style sheets). This rule will then automatically cascade and
be applied to the document.

For example (the code samples will require beta 2):

  <STYLE>
    DIV {position: absolute; top: 10; left: 20}
  </STYLE>
  <DIV ID=d1>Box 1</DIV>
  <DIV>Box 2</DIV>

Both of these are initially on top of each other.

To change the position and other style of both DIV's, add a new global
rule to the first style sheet.
document.styleSheets[0].addRule("DIV", "position: absolute; top: 30;
left: 30; color: red; font: bold 18pt Arial")

To see where the element D1 is rendered:
alert(document.all.d1.offsetLeft);

To override and move the DIV, D1:
document.all.d1.style.top = "20pt"; 
// We also expose posTop, posLeft, etc that returns just the value
without the unit for numerical computation
  and pixelTop, pixelLeft, etc., for numeric pixel manipulation.


Hope this helps,
Scott Isaacs


> ----------
> From: 	Taylor[SMTP:taylor@wired.com]
> Sent: 	Thursday, July 03, 1997 11:44 AM
> To: 	Scott Isaacs
> Cc: 	www-style@w3.org; 'vertigo@triberian.com'
> Subject: 	RE: Cascading Style Sheets
> 
> On Thu, 3 Jul 1997, Scott Isaacs wrote:
> 
> |In addition, every property can be scripted through IE4's Dynamic
> HTML
> |object model (for swipe effects, moving elements, accessing and
> changing
> |the contents, changing the appearance, etc) but that is independent
> from
> |CSS.
> 
> But can every property be read from the DOM?  I've had problems where
> only
> inline style rules are accessable to being read, while linked styles,
> or
> styles contained in the head are writable on the object, but not
> readable.
> 
> -----------------------------------------------------------taylor@wire
> d.com
>   "California seceding will not meet 
>                                  Taylor's need for spiritual
> development."
> Wired Digital's Minister of Ambiance and
> Energy----------------------------
>

Received on Thursday, 3 July 1997 15:18:06 UTC