Style class

From PhiWiki
Jump to: navigation, search

Describes the style settings for an element in a web or intranet document. You can change ie. colors, opacity, values, positions, transformations, etc. of an item. Special effects on items may be set with the Effect class. The Style class is a sub class of the Item class.

This class is obsolete. Do not use it in new code. The class is provided to keep old code working.. Use the Phi item API instead.

Usage

The Style class provides many additional functions in the Phi environment which are not available in HTML so they will be ignored outside Phi. Those functions are marked with the 'Phi' symbol.

You reference an element by its id (the ID you set in the Aphilo editor):

var item1=phi.getElementById( 'id' ); //prefered version in the client environment
var item2=window.document.getElementById( 'id' ); //client environment
var serveritem=document.getElementById( 'id' ); //server environment
item1.style.top='10px';

Additional effects and properties are also available through the Effect class and the parent Item class.

Note: if you want to use special CSS properties in Phi (it does not work in XHTML) use:

var item=phi.getElementById( 'myid' );
item.styleSheet='border: 1px; border-color: red;'; // phi.isNative()==true

However this is currently rarly tested! Testing output is really wellcome.

Properties

  • String backgroundColor [read|write]
  • String borderRadius [read|write]
  • String color [read|write]
  • String height [read|write]
  • String left [read|write]
  • Number line [read|write] Phi
  • String opacity [read|write]
  • String outlineColor [read|write] Phi
  • Number pattern [read|write] Phi
  • Number penWidth [read|write] Phi
  • StringArray properties [read] Phi
  • String rolloverTextColor [read|write] Phi
  • String rolloverBackgroundColor [read|write] Phi
  • Number rotateX [read|write] Phi
  • Number rotateY [read|write] Phi
  • Number rotateZ [read|write] Phi
  • Number shearH [read|write] Phi (obsolete)
  • Number shearV [read|write] Phi (obsolete)
  • Number skewX [read|write] Phi
  • Number skewY [read|write] Phi
  • Number startAngle [read|write] Phi
  • Number spanAngle [read|write] Phi
  • String top [read|write]
  • String visibility [read|write] Phi
  • String width [read|write]
  • Number zIndex [read|write]

All properties can be set and read (replace <prop_name> with one of the above property names) with:

var item=document.getElementById( 'id' ); // server
var item=phi.getElementById( 'id' ); // client
var prop=item.style.<prop_name>;
item.style.<prop_name>=value;

String backgroundColor

Sets the background color of an item. Only the '#RRGGBB' notation is supported.

item.style.backgroundColor='#12af03';

String borderRadius

v1.1.1 Sets the border radius for Rounded rects.

item.style.borderRadius='5px';

String color

Sets the color of an item. Only the '#RRGGBB' notation is supported.

item.style.color='#12af03';

String height

Height of an item. On some items this has no effect (ie. items with a fixed height).

item.style.height='20px';

Note: in Phi only values with 'px' are allowed.

String left

Left position of an item in pixels.

item.style.left='200px';

Number line

Drawing type of the outline for shape items.

  • 0: none
  • 1: solid line
  • 2: dashed line
  • 3: dotted line
  • 4: dashed-dotted line
  • 5: dashed-dotted-dotted line
item.style.line=3; // draws a dotted outline

String opacity

Sets the opacity of an item. The range is between 0 (fully transparent) to 1 (fully opaque).

item.style.opacity=0.3; // 30% opacity

Note: not all browsers use this property equally. You should use phi.setOpacity() instead!

String outlineColor

Sets the outline color of an item. Only the '#RRGGBB' notation is supported. Used for outlining shape items, like ellipses and boxes. Outline colors are infact the same as the background color.

item.style.outlineColor='#12af03';

Note: this has the same effect as using backgroundColor.

Number pattern

Defines the pattern of a shape item.

  • 0: none
  • 1: solid
  • 2: dense 1
  • 3: dense 2
  • 4: dense 3
  • 5: dense 4
  • 6: dense 5
  • 7: dense 6
  • 8: dense 7
  • 9: horizontal pattern
  • 10: vertical pattern
  • 11: cross pattern
  • 12: B diagonal pattern
  • 13: F diagonal pattern
  • 14: diagonal cross pattern
item.style.pattern=9; // draws a shape with horizontal lines

Number penWidth

Defines the pen width of the outline of an shape item.

item.style.penWidth=2.5;

StringArray properties

Returns the string array of available properties for the Item class.

var i=0;
while ( item.properties[i] ) print( item.properties[i++] );

String rolloverTextColor

Defines the text color of an rollover item when the mouse is passed over the item. Only the '#RRGGBB' notation is supported.

item.style.rolloverTextColor='#ff0000';

See also: item.onmouseover.

String rolloverBackgroundColor

Defines the background color of an rollover item when the mouse is passed over the item. Only the '#RRGGBB' notation is supported.

item.style.rolloverBackgroundColor='#ff0000';

See also: item.onmouseover.

Number rotateX

Rotates the item through the x-axis.

item.style.rotateX=200.5; // rotates the item 200.5 degrees

Number rotateY

Rotates the item through the y-axis.

var deg=item.style.rotateY; // returns the degrees which this item is rotated through the y-axis

Number rotateZ

Rotates the item through the z-axis.

item.style.rotateZ=90; // rotates the item 90 degress

Number shearH

This member is obsolete. Do not use it in new code. The member is provided to keep old code working. Shears the item horizontally. You may use this for perspective effects.

item.style.shearH=1.5;

Use item.style.skewX instead.

Number shearV

This member is obsolete. Do not use it in new code. The member is provided to keep old code working. Shears the item vertically. You may use this for perspective effects.

item.style.shearV=0.5;

Use item.style.skewY instead.

Number skewX

Skews the item horizontally. You may use this for perspective effects.

item.style.skewX=0.5;

Number skewY

Skews the item vertically. You may use this for perspective effects.

item.style.skewY=0.5;

Number startAngle

Defines the start angle of an ellipse item in 16th degrees.

item.style.startAngle=90*16; // Draws a pie starting at 90 degrees.

See also: ellipse.

Number spanAngle

Defines the span angle of an ellipse item in 16th degrees.

item.style.spanAngle=30*16; // spans 30 degrees

See also: ellipse.

String top

Position in pixels from the top of the page.

item.style.top='50px';

String visibility

Sets the visibility of an item. Allowed values are hidden and visible. You should prefer the convenience function phi.setVisible() in the client environment.

var item1=phi.getElementById( 'myitem1' );
var item2=phi.getElementById(