Style

Everything related to appearance. Usually, this is CSS.

setStyle

Sets the value of a single CSS property.

syntax

x$( selector ).setStyle( property, value );

arguments

• property String is the name of the property to modify.
• value String is the new value of the property.

example

x$('.flash').setStyle('color', '#000');
x$('.button').setStyle('backgroundColor', '#EFEFEF');

getStyle

Returns the value of a single CSS property. Can also invoke a callback to perform more specific processing tasks related to the property value. Please note that the return type is always an Array of strings. Each string corresponds to the CSS property value for the element with the same index in the xui collection.

syntax

x$( selector ).getStyle( property, callback );

arguments

• property String is the name of the CSS property to get.
• callback Function is called on each element in the collection and passed the property (optional).

example

   <ul id="nav">
       <li class="trunk" style="font-size:12px;background-color:blue;">hi</li>
       <li style="font-size:14px;">there</li>
   </ul>

x$('ul#nav li.trunk').getStyle('font-size'); // returns ['12px']
x$('ul#nav li.trunk').getStyle('fontSize'); // returns ['12px']
x$('ul#nav li').getStyle('font-size'); // returns ['12px', '14px']

x$('ul#nav li.trunk').getStyle('backgroundColor', function(prop) {
    alert(prop); // alerts 'blue' 
});

addClass

Adds a class to all of the elements in the collection.

syntax

x$( selector ).addClass( className );

arguments

• className String is the name of the CSS class to add.

example

x$('.foo').addClass('awesome');

hasClass

Checks if the class is on all elements in the xui collection.

syntax

x$( selector ).hasClass( className, fn );

arguments

• className String is the name of the CSS class to find.

• fn Function is a called for each element found and passed the element (optional).

  // `element` is the HTMLElement that has the class
  function(element) {
      console.log(element);
  }
  

example

   <div id="foo" class="foo awesome"></div>
   <div class="foo awesome"></div>
   <div class="foo"></div>

// returns true
x$('#foo').hasClass('awesome');

// returns false (not all elements with class 'foo' have class 'awesome'),
// but the callback gets invoked with the elements that did match the 'awesome' class
x$('.foo').hasClass('awesome', function(element) {
    console.log('Hey, I found: ' + element + ' with class "awesome"');
});

// returns true (all DIV elements have the 'foo' class)
x$('div').hasClass('foo');

removeClass

Removes the specified class from all elements in the collection. If no class is specified, removes all classes from the collection.

syntax

x$( selector ).removeClass( className );

arguments

• className String is the name of the CSS class to remove. If not specified, then removes all classes from the matched elements. (optional)

example

x$('.foo').removeClass('awesome');

toggleClass

Removes the specified class if it exists on the elements in the xui collection, otherwise adds it.

syntax

x$( selector ).toggleClass( className );

arguments

• className String is the name of the CSS class to toggle.

example

   <div class="foo awesome"></div>

x$('.foo').toggleClass('awesome'); // div above loses its awesome class.

css

Set multiple CSS properties at once.

syntax

x$( selector ).css( properties );

arguments

• properties Object is a JSON object that defines the property name/value pairs to set.

example

x$('.foo').css({ backgroundColor:'blue', color:'white', border:'2px solid red' });