setStyle()

Category:Advanced

Apps in App Lab are composed of HTML elements, such as buttons. While these elements can be styled to some extent using the Design Tab, more advanced styling (or any styling of programmatically created elements) can be achieved by using CSS. This advanced function allows assigning CSS styles to HTML design elements in an app.

Examples

Fancy Button

Apply several different styles to a single element

                            setStyle("fancyButton", "font-family: monospace;");
setStyle("fancyButton", "font-size: 40px;");
setStyle("fancyButton", "font-weight: bold;");
setStyle("fancyButton", "border-radius: 50px;");
setStyle("fancyButton", "background: linear-gradient(red, yellow);");
setStyle("fancyButton", "border: 2px solid red");

Big and Bold

Apply style to make a programmatically created text label bold and large.

textLabel("myLabel", "some text to style");
setStyle("myLabel", "font-weight: bold; font-size: 30px;");

Syntax

setStyle(id, css)

Parameters

Name	Type	Required?	Description
id	String		The ID of a design element to be styled.
css	String		A string of CSS, using inline syntax.

Tips

Calling setStyle multiple times on the same element won't overwrite its style, but will append new styles on top of existing ones.

Found a bug in the documentation? Let us know at documentation@code.org