From ProtoScript

Contents 1 YUI:SetStyle Behavior 1.1 Example 1.2 Attributes 1.3 CSS Style Attributes 1.4 Callbacks 1.5 Demo

YUI:SetStyle Behavior

Sets CSS styles. Valid css style names may be used.

A common technique is to use styles to change portions of an interface by swapping out styles.

Example

$proto('#avatar', {
  Click: {
    onClick: {
      SetStyle: {
        borderLeftWidth: '2px',
        borderLeftStyle: 'solid',
        borderLeftColor: '#FF0000',
        borderRightWidth: '2px',
        borderRightStyle: 'solid',
        borderRightColor: '#FF0000'
      }
    }  
  }
});

When the image (id=avatar) is clicked, set the left and right borders to red color.

Attributes

Name	Description	Default	Valid Values	Example
target	Selected element or elements to attach a click event to. If no value supplied, uses the last targeted element. If value is supplied, use the element(s) selected by the target instead. See Element Scope	Inherits parent target	String value denoting an interface element.	target: '#avatar'

CSS Style Attributes

Here is a list that maps some of the available CSS style attributes to the names used in protoscript to specify a style attribute.

CSS name	Protscript name
border-bottom-style	borderBottomStyle
border-bottom-width	borderBottomWidth
border-bottom-color	borderBottomColor
border-top-style	borderTopStyle
border-top-width	borderTopWidth
border-top-color	borderTopColor
border-left-style	borderLeftStyle
border-left-width	borderLeftWidth
border-left-color	borderLeftColor
border-right-style	borderRightStyle
border-right-width	borderRightWidth
border-right-color	borderRightColor
margin-bottom	marginBottom
margin-top	marginTop
margin-left	marginLeft
margin-right	marginRight
padding-bottom	paddingBottom
padding-top	paddingTop
padding-left	paddingLeft
padding-right	paddingRight
width	width
height	height
left	left
right	right
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
color	color
font-family	fontFamily
font-size	fontSize
font-style	fontStyle
font-variant	fontVariant
font-weight	fontWeight
line-height	lineHeight
text-align	textAlign
text-decoration	textDecoration
text-indent	textIndent
text-transform	textTransform
vertical-align	verticalAlign

Callbacks

Name	Description
onSetStyle	The callback corresponding to this behavior. Fired when behavior completes.

Demo

See SetStyle Demo