|
<< Click to Display Table of Contents >> Navigation: »No topics above this level« CSS properties and classes |
Element CSS properties can be accessed via Element.Style property. For example
function BorderTopStyle: TLineStyle;
function BorderRightStyle: TLineStyle;
function BorderBottomStyle: TLineStyle;
function BorderLeftStyle: TLineStyle;
function BoxShadow: TElementShadow;
function TextShadow: TElementShadow;
function FlexDirection: TCSSFlexDirection;
function JustifyContent: TCSSJustifyContent;
Some properties are of TMeasure type, to get actual pixel value use its PIxels (integer) or FPixels (float) property.
Also it has Value and MUnit (measurement unit) properties.
Properties cannot be changed directly, to change it use Element.AddCSS method. For example
Element.AddCSS('color: black');
AddCSS has two additional parameters
•UpdateStyleAttr - element style attribute will be updated
•Weight - custom CSS weight (priority)
To change porperty without affecting style attribute, it is better to use AddvirtualCSS method.
To clear CSS property value (revert to default) use ClearCSS method, or ClearCSSRecursive (clear in element and all descendants).
Property can be changed for number of selected elements, use css[] property of JQuery or XPath result. For example
Doc.JQuery('img.small').css['border'] := 'solid red 1px';
Inline element stylesheet can be accessed via SelfStylesheet property. Note that it contains properties from both inline style and virtual style.
Virtual style contains properties calculated from element attributes and added from code using AddVirtualCSS.
To change whole inline style use SelfStyle property, SetAttribute method or Attr['style'] property. Attr[] will only change attribute, but not affect stylesheet, SetAttribute and SelfStyle will immediately apply new value to inline stylesheet.
•StyleClass or ClassName or Attr['class'] - get current classes
•HasClass - check is element has class
•RemoveClass - remove class from element
•ToggleClass - add or remove class
When using JQuery or XPath following methods are available:
•HasClass - check is element has class
•RemoveClass - remove class from element
•ToggleClass - add or remove class
Example:
Doc.JQuery('div.row').addClass('selected');