css()

Gets the value of a style property of one HTML element, or sets one or more CSS properties of one or more HTML elements.

css(styleNam​e) : String

Returns the value of the specified CSS property of an HTML element, which can be:

  • The first element in a set of elements that match the selector of a script (see results).
  • One element that matches the selector of a script that runs for "Each matched element" (see this and Setting the scope of a script).
  • The first element in a set of elements returned by a query in the template (see query()).

propertyName

String; the name of the CSS property.

Examples

This script stores the text color of the results (the HTML elements that match the selector of the script) in a variable.

​var textcolor = results.css("color");​

​

The following script looks up an element with the ID #calloutbox and stores its background color in a variable.

var backgroundcolor = query("#calloutbox").css("background-color");

css(styleName, valu​e)

Function to set a CSS property of one HTML element or of each element in a result set.

propertyName

String; the name of the CSS property.

value

String; value for the CSS property or a map of property-value pairs to set.

Examples

This script looks up an element with the ID #calloutbox and sets its text color to red.

query("#callout p").css('color' , 'red');

The following script does the same, but it only sets the text color to red if in the current record the value of the field 'accounttype' is 'PRO'. 

if(record.fields.accounttype == "PRO") { 
query("#callout p").css("color","red"); 
}

This script sets the text color of the results to a hexadecimal color code.

results.css('color' , '#669900');

This script loads a snippet into a variable. Then it finds/replaces text in the snippet and applies a css property to the replacing text.

​var mysnippet = loadhtml('snippets/snippet vars.html'); 
mysnippet.find('@var@').text('OL Connect').css('text-decoration','underline'); 
results.replaceWith(mysnippet);

css(properties)

Function to set one or multiple CSS properties of one or more HTML elements, which can be:

  • The elements that match the selector of a script (see results).
  • One element that matches the selector of a script that runs for "Each matched element" (see this and Setting the scope of a script).
  • The elements returned by a query in the template (see query()).

properties

Array; map of property-value pairs to set.

Examples

This script colors the text of the results (the set of HTML elements that match the selector of the script) red and makes it bold.

​​results.css({'color' : 'red', 'font-weight' : 'bold'});