Basic useful feature list:
- All native javascript based functions
- Simple DOM queries
- Color operations
Implemented but not uploaded:
- accesibleme panel
- accesibleme validator
#Make a query!
Description: Accepts a string containing a CSS selector which is then used to match a set of elements.
/* Select DOM elements */
var elem = accesibleme.query( selector [, context] );
selector: A string containing a selector expression.
context [optional]: A DOM Element, Document. Start point of the query.
return valu: An accesibleme object.
/* Select all div elements */
var elems0 = accesibleme.query( "div" );
/* Select all elements with classname "mi_clase" */
var elems1 = accesibleme.query( ".mi_clase" );
/* Select the element with id "mi_id" */
var elem = accesibleme.query( "#mi_id" );
Description: Get the value of a style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.
/* Select DOM elements */
var elem = accesibleme.query( selector [, context] );
- selector: A string containing a selector expression.
- context [optional]: A DOM Element, Document.
- return: An accesibleme object.
/* Get property */
var property = accesibleme.query( selector ).css( propertyName );
/* Set property */
var property = accesibleme.query( selector ).css( propertyName, value );
- propertyName: A CSS property.
- value: A value to set for the property.
- return value: An property as string.
/* Create an accesibleme.colors object */
var color = accesibleme.colors( color );
- color: A string containing a CSS color string, or a basic color object.
- Return value: An accesibleme.color object.
- named: like
red
,blue
,green
- hex:
F70
,#F70
,FF7700
,#FF7700
, or with alpha:#F70FA
,F70FA
,#FF7700F
, ```FF7700FF `` - rgb:
rgb(255, 127, 0)
, orrgb( 100%, 50%, 0)
- rgba:
rgba(255, 127, 0, 0.5)
, orrgba( 100%, 50%, 0%, 0.5)
- hsl:
hsl(39, 100%, 50%)
- hsla:
hsla(39, 100%, 50%)
- hex:
{ format:hex, rh:FF, gh:AA, bh:00 }
, or with alpha{ format:hex, rh:"FF, gh:AA, bh:"00, ha:FF }
- rgb:
{ format: rgb, r:255, g:127, b:0}
, or{ format: rgb, r:100%, g:50%, b:0%}
- rgba:
{ format: rgba, r:255, g:127, b:0, a:0.5 }
, or{ format: rgba, r:100%, h:50%, b:0%, a:0.5}
- hsl:
{ format: hsl, h:39, s:100%, l:50%}
, or{ format: hsl, h:39, s:100%, l:50% }
- hsla:
{ format: hsl, h:39, s:100%, l:50%, a:0.5 }
, or{ format: hsl, h:39, s:100%, l:50%, a:0.5}
/* Create an accesibleme.colors object with CSS color string */
var color1 = accesibleme.colors( "rgb(255, 0, 0)" );
/* Create an accesibleme.colors object with basic color object */
var color2 = accesibleme.query( {format:"rgb", r:255, g:0, b:0} );
/* Clone an accesibleme.colors object */
var color3 = color.clone();
Description: Detect the color format and return it as string.
/* Detect with an accesibleme.colors object */
var color = accesibleme.colors( "rgb(255, 175, 128=" );
console.log(color.stringDetectFormat()); // rgb
/* Detect without accesibleme.colors object */
console.log(accesibleme.colors().stringDetectFormat( "#F7A" )); // hex
Description: Return the converted color as a string with CSS format.
/* Return without accesibleme.colors object */
console.log(accesibleme.colors().stringDetectFormat( "hsl(39, 100%, 50%)", "rgb" )); // rgb(255, 165, 0)
Description: Return the converted color as a simple color object
/* Return as Rgb */
object.toRgbAsObject([alpha])
- [alpha]: Boolean value. If defined, return the object with or without alpha value; if not, return the object with the original color state.
var color = accesibleme.colors( { format: rgb, r:255, g:255, b:255 } );
/* Return as hex */
console.log(color.toHexAsObject()); // { format: hex, hr:FF, hg:FF, hb: FF }
console.log(color.toHexAsObject(true)); // { format: hex, hr:FF, hg:FF, hb: FF, ha: FF }
console.log(color.toHexAsObject(false)); // { format: hex, hr:FF, hg:FF, hb: FF }
/* Return as rgb */
console.log(color.toRgbAsObject()); // { format: rgb, r:255, g:255, b: 255 }
console.log(color.toRgbAsObject(true)); // { format: rgba, r:255, g:255, b: 255, a:1 }
console.log(color.toRgbAsObject(false)); // { format: rgba, r:255, g:255, b: 255, a:1 }
/* Return as hsl */
console.log(color.toHslAsObject()); // { format: hsl, h:360, s: 100%, l: 100%)
console.log(color.toHslAsObject(true)); // { format: hsla, h:360, s: 100%, l: 100%, a:1 }
console.log(color.toHslAsObject(false)); // { format: hsl, h:360, s: 100%, l: 100% }
Description: Return the converted color as a string with CSS format.
/* Return as Rgb */
object.toRgbAsObject([alpha])
- [alpha]: Boolean value. If defined, return the object with or without alpha value; if not, return the object with the original color state.
var color = accesibleme.colors( { format: rgb, r:255, g:255, b:255 } );
/* Return as hex */
console.log(color.toHexAsString()); // #FFFFFF
console.log(color.toHexAsString(true)); // #FFFFFFFF
console.log(color.toHexAsString(false)); // #FFFFFF
/* Return as rgb */
console.log(color.toRgbAsString()); // rgb(255, 255, 255)
console.log(color.toRgbAsString(true)); // rgba(255, 255, 255, 1)
console.log(color.toRgbAsString(false)); // rgb(255, 255, 255)
/* Return as hls */
console.log(color.toHslAsString()); // hsl(360, 100%, 100%)
console.log(color.toHslAsString(true)); // hsla(360, 100%, 100%, 1)
console.log(color.toHslAsString(false)); // hsl(360, 100%, 100%)
Description: Return the converted color as a string with CSS format.
/* Return as Rgb */
object.toRgbAsObject([alpha])
- [alpha]: Boolean value. If defined, return the object with or without alpha value; if not, return the object with the original color state.
var color = accesibleme.colors( { format: rgb, r:255, g:255, b:255 } );
/* Return as hex */
console.log(color.toHexAsString()); // #FFFFFF
console.log(color.toHexAsString(true)); // #FFFFFFFF
console.log(color.toHexAsString(false)); // #FFFFFF
/* Return as rgb */
console.log(color.toRgbAsString()); // rgb(255, 255, 255)
console.log(color.toRgbAsString(true)); // rgba(255, 255, 255, 1)
console.log(color.toRgbAsString(false)); // rgb(255, 255, 255)
/* Return as hls */
console.log(color.toHslAsString()); // hsl(360, 100%, 100%)
console.log(color.toHslAsString(true)); // hsla(360, 100%, 100%, 1)
console.log(color.toHslAsString(false)); // hsl(360, 100%, 100%)
Calcule the color luminance
Calcule the relative color luminance (important to calculate contrast)
Calcule the contrast between two colors (important to WCAG validation)
Calcule the negative color