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 support@code.org.
