JAVASCRIPT

Ink.Dom.Css_1

CSS Utilities and toolbox

All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.Dom.Css namespace

Functions
Function name Description
.addClassName(elm, className) Adds a class to a given element
.addRemoveClassName(elm, className, addRemState) Adds of removes a class.
.appendStyleTag(selector, style, options) Injects style tags with rules to the page.
.appendStylesheet(path, options) Injects an external link tag.
.appendStylesheetCb(cssURI, [callback]) Injects an external link tag.
.blinkClass(element, className, timeout, negate) Blinks a class from an element
.changeFontSize(selector, delta, [op], [minVal], [maxVal]) Change the font size of elements.
.decToHex(dec) Converts decimal to hexadecimal values
.getPropertyFromStylesheet(selector, property) Get a single property from a stylesheet.
.getStyle(elm, style) Gets the value for an element's style attribute
.hasClassName(elm, className, [all]) Checks if an element has a class.
.hexToDec(hex) Converts hexadecimal values to decimal
.hide(elm) Hides an element.
.removeClassName(elm, className) Removes a class from a given element
.setClassName(elm, className, [add]) Alias to addRemoveClassName.
.setOpacity(elm, value) Sets the opacity of given element
.setStyle(elm, style) Adds CSS rules to an element's style attribute.
.show(elm, [forceDisplayProperty]) Shows an element.
.showHide(elm, [show]) Shows or hides an element.
.toggle(elm, forceShow) Toggles an element visibility.
.toggleClassName(elm, className, [forceAdd]) Toggles a class name from a given element

.addClassName(elm, className) method

Adds a class to a given element

Accepts

  • elm

    Element or element id

  • className

    Class or classes to add. Examples: 'my-class', ['my-class', 'other-class'], 'my-class other-class'

Code

<div id="container">
    Element content 
</div>
<script>
Ink.requireModules(['Ink.Dom.Css_1'], function(InkCss){
    var elm = Ink.i('container');
    InkCss.addClassName(elm, 'newclass');
    InkCss.addClassName(elm, ['class1', 'class2']);
                
    Ink.log(elm);
    // <div id="container" class="newclass class1 class2">
});
</script>

.addRemoveClassName(elm, className, addRemState) method

Adds of removes a class.
Depending on addRemState, this method either adds a class if it's true or removes if if false.

Accepts

  • elm

    DOM element or element id

  • className

    class name to add or remove.

  • addRemState

    Whether to add or remove. `true` to add, `false` to remove.

Code

<div id="elm1">
    Element content 
</div>
<div id="elm2" class="class2">
    Element content 
</div>
<script>
Ink.requireModules(['Ink.Dom.Css_1'], function(InkCss){
    var elm1 = Ink.i('elm1');
    var elm2 = Ink.i('elm2');
    InkCss.addRemoveClassName(elm1, 'class1', true);
    InkCss.addRemoveClassName(elm2, 'class2', false);
                
    Ink.log(elm1);
    // <div id="elm1" class="class1">
    Ink.log(elm2);
    // <div id="elm2" class="">
});
</script>

.appendStyleTag(selector, style, options) method

Injects style tags with rules to the page.

Accepts

  • selector

    The css selector for the rule

  • style

    The content of the style rule

  • options

    Options for the tag

  • options.type

    'text/css'File type

  • options.force

    falseIf true, the style tag will be appended to end of head

Code

<!-- original markup -->
<html>
<head>
</head>
<body>
    <div id="elm">
        Element content 
    </div>
</body>
</html>

<script>
Ink.requireModules(['Ink.Dom.Css_1'], function(InkCss){
    InkCss.appendStyleTag('#elm', 'border: 5px solid #000;');
});
</script>

<!-- result markup -->
<html>
<head>
    <style type="text/css">
    #elm {
        border: 5px solid #000;
    }
    </style>
</head>
<body>
    <div id="elm">
        Element content 
    </div>
</body>
</html>

.appendStylesheet(path, options) method

Injects an external link tag.
This method add a stylesheet to the head of a page

Accepts

  • path

    File path

  • options

    Options for the tag

  • options.media

    'screen'Media type

  • options.type

    'text/css'File type

  • options.force

    falseIf true, tag will be appended to end of head

Code

<!-- original markup -->
<html>
<head>
</head>
<body>
    <div id="elm">
        Element content 
    </div>
</body>
</html>

<script>
Ink.requireModules(['Ink.Dom.Css_1'], function(InkCss){
    InkCss.appendStylesheet('https://example.com/css/file.css');
});
</script>

<!-- result markup -->
<html>
<head>
    <link rel="stylesheet" href="https://example.com/css/file.css" type="text/css" media="screen">
</head>
<body>
    <div id="elm">
        Element content 
    </div>
</body>
</html>

.appendStylesheetCb(cssURI, [callback]) method

Injects an external link tag.
Loads CSS via LINK element inclusion in HEAD (skips append if already there)

Works similarly to appendStylesheet but:
supports optional callback which gets invoked once the CSS has been applied

Accepts

  • cssURI

    URI of the CSS to load, if empty ignores and just calls back directly

  • callback

    optional callback which will be called once the CSS is loaded

Code

<!-- original markup -->
<html>
<head>
</head>
<body>
    <div id="elm">
        Element content 
    </div>
</body>
</html>

<script>
Ink.requireModules(['Ink.Dom.Css_1'], function(InkCss){
    InkCss.appendStylesheetCb('https://example.com/css/file.css', function() {
            Ink.log('CSS is ready...');
        });
});
</script>

<!-- result markup -->
<html>
<head>
    <link rel="stylesheet" href="https://example.com/css/file.css" type="text/css" media="screen">
</head>
<body>
    <div id="elm">
        Element content 
    </div>
</body>
</html>

.blinkClass(element, className, timeout, negate) method

Blinks a class from an element
Add and removes the class from the element with a timeout, so it blinks

Accepts

  • element

    DOM element or element id

  • className

    Class name(s) to blink

  • timeout

    timeout in ms between adding and removing, default 100 ms

  • negate

    is true, class is removed then added

Code

<div id="elm1">
    Element content 
</div>
<script>
Ink.requireModules(['Ink.Dom.Css_1'], function(InkCss){
    var elm1 = Ink.i('elm1');
    InkCss.blinkClassName(elm1, 'newclass', 1000);
                
    Ink.log(elm1);
    // <div id="elm1" class="newclass"> 
    // after 1 sec 
    // <div id="elm1"> 
});
</script>

.changeFontSize(selector, delta, [op], [minVal], [maxVal]) method

Change the font size of elements.
Changes the font size of the elements which match the given CSS rule
For this function to work, the CSS file must be in the same domain than the host page, otherwise JS can't access it.

Accepts

  • selector

    CSS selector rule

  • delta

    Number of pixels to change on font-size

  • op

    Supported operations are '+' and '*'. defaults to '+'

  • minVal

    If result gets smaller than minVal, change does not occurr

  • maxVal

    If result gets bigger than maxVal, change does not occurr

.decToHex(dec) method

Converts decimal to hexadecimal values
Useful to convert colors to their hexadecimal representation.

Accepts

  • dec

    Either a single decimal value, an rgb(r, g, b) string or an Object with r, g and b properties

Code

Ink.requireModules(['Ink.Dom.Css_1'], function(InkCss){
    var a = InkCss.decToHex(51);
    Ink.log(a);
    // 33 
    var b = InkCss.decToHex({r:255, g: 0, b: 100});
    Ink.log(b);
    // FF0064 
});

.getPropertyFromStylesheet(selector, property) method

Get a single property from a stylesheet.
Use this to obtain the value of a CSS property (searched from loaded CSS documents)

Accepts

  • selector

    a CSS rule. must be an exact match

  • property

    a CSS property

.getStyle(elm, style) method

Gets the value for an element's style attribute

Accepts

  • elm

    DOM element or element id

  • style

    Which css attribute to fetch

Code

<style type="text/css">
.classrule {
    color: #FF0000;
    font-size:12px;
}
</style>
<div id="elm" class="classrule">
    Element content 
</div>
<script>
Ink.requireModules(['Ink.Dom.Css_1'], function(InkCss){
    var elm = Ink.i('elm');
    var color = InkCss.getStyle(elm, 'color');
    var fontSize = InkCss.getStyle(elm, 'font-size');

    Ink.log(color); // rgb(255, 0, 0) )
    Ink.log(fontSize); // 12px 
});
</script>

.hasClassName(elm, className, [all]) method

Checks if an element has a class.
This method verifies if an element has ONE of a list of classes. If the last argument is flagged as true, instead checks if the element has ALL the classes

Accepts

  • elm

    DOM element or element id

  • className

    Class name(s) to test

  • all

    falseIrrelevant if only one `className` is passed. If `true`, check if the element contains ALL the CSS classes. If `false`, check whether the element contains ANY of the given classes.

Code

<div id="container" class="classname">
    Element content 
</div>
<script>
Ink.requireModules(['Ink.Dom.Css_1'], function(InkCss){
    var elm = Ink.i('container');

    InkCss.hasClassName(elm, 'newclass'); // false 
    InkCss.hasClassName(elm, 'classname'); // true 
});
</script>

.hexToDec(hex) method

Converts hexadecimal values to decimal
Useful to use with CSS colors

Accepts

  • hex

    hexadecimal Value with 6, 3, 2 or 1 characters

Code

Ink.requireModules(['Ink.Dom.Css_1'], function(InkCss){
    var a = InkCss.hexToDec('#CCC');
    Ink.log(a);
    // {r: 204, g: 204, b: 204}
    var b = InkCss.hexToDec('#FF0033');
    Ink.log(b);
    // {r: 255, g: 0, b: 51}
});

.hide(elm) method

Hides an element.

Accepts

  • elm

    DOM element or element id

Code

<div id="elm"> 
    Element content 
</div>
<script>
Ink.requireModules(['Ink.Dom.Css_1'], function(InkCss){
    var elm = Ink.i('elm');

    InkCss.hide(elm);
    Ink.log(elm);
    // <div id="elm" style="display: none;">
});
</script>

.removeClassName(elm, className) method

Removes a class from a given element

Accepts

  • elm

    DOM element or element id

  • className

    Class names to remove. You can either use a space separated string of classnames, comma-separated list or an array

Code

<div id="container" class="oldclass">
    Element content 
</div>
<script>
Ink.requireModules(['Ink.Dom.Css_1'], function(InkCss){
    var elm = Ink.i('container');
    InkCss.removeClassName(elm, 'oldclass');
                
    Ink.log(elm);
    // <div id="container">
});
</script>

.setClassName(elm, className, [add]) method

Alias to addRemoveClassName.
Utility function, saves many if/elses.

Accepts

  • elm

    DOM element or element id

  • className

    Class names to add\remove. Comma separated, space separated or simply an Array

  • add

    falseFlag to switch behavior from removal to addition. true to add, false to remove

.setOpacity(elm, value) method

Sets the opacity of given element

Accepts

  • elm

    DOM element or element id

  • value

    allows 0 to 1(default mode decimal) or percentage (warning using 0 or 1 will reset to default mode)

Code

<div id="elm">
    Element content 
</div>
<script>
Ink.requireModules(['Ink.Dom.Css_1'], function(InkCss){
    var elm = Ink.i('elm');
    InkCss.setOpacity(elm, 0.5);

    Ink.log(elm);
    // <div id="elm" style="opacity:0.5;">
});
</script>

.setStyle(elm, style) method

Adds CSS rules to an element's style attribute.

Accepts

  • elm

    DOM element or element id

  • style

    Which css attribute to set

Code

<div id="elm">
    Element content 
</div>
<script>
Ink.requireModules(['Ink.Dom.Css_1'], function(InkCss){
    var elm = Ink.i('elm');
    InkCss.setStyle(elm, 'color:#000; font-size:20px;');

    Ink.log(elm); 
    // <div id="elm" style="color: rgb(0, 0, 0); font-size: 20px;">
});
</script>

.show(elm, [forceDisplayProperty]) method

Shows an element.
Internally it unsets the display property of an element. You can force a specific display property using forceDisplayProperty

Accepts

  • elm

    DOM element or element id

  • forceDisplayProperty

    Css display property to apply on show

Code

<div id="elm" style="display:none;">
    Element content 
</div>
<script>
Ink.requireModules(['Ink.Dom.Css_1'], function(InkCss){
    var elm = Ink.i('elm');
    InkCss.show(elm);
    Ink.log(elm);
    // <div id="elm" style="">
    
    InkCss.show(elm, 'block');
    Ink.log(elm);
    // <div id="elm" style="display:block;">
});
</script>

.showHide(elm, [show]) method

Shows or hides an element.
If the show parameter is true, it shows the element. Otherwise, hides it.

Accepts

  • elm

    DOM element or element id

  • show

    falseWhether to show or hide `elm`.

Code

<div id="elm">
    Element content 
</div>
<script>
Ink.requireModules(['Ink.Dom.Css_1'], function(InkCss){
    var elm = Ink.i('elm');
    InkCss.showHide(elm, true);
    Ink.log(elm);
    // <div id="elm" style=""> 
    InkCss.showHide(elm, false);
    Ink.log(elm);
    // <div id="elm" style="display: none;"> 
});
</script>

.toggle(elm, forceShow) method

Toggles an element visibility.

Accepts

  • elm

    DOM element or element id

  • forceShow

    Forces showing if element is hidden

Code

<div id="elm">
    Element content 
</div>
<script>
Ink.requireModules(['Ink.Dom.Css_1'], function(InkCss){
    var elm = Ink.i('elm');
    InkCss.toggle(elm);
    Ink.log(elm);
    // <div id="elm" style="display: none;"> 
    InkCss.toggle(elm);
    Ink.log(elm);
    // <div id="elm" style=""> 
});
</script>

.toggleClassName(elm, className, [forceAdd]) method

Toggles a class name from a given element

Accepts

  • elm

    DOM element or element id

  • className

    Class name

  • forceAdd

    Flag to force adding the the classe names if they don't exist yet.

Code

<div id="elm1">
    Element content 
</div>
<script>
Ink.requireModules(['Ink.Dom.Css_1'], function(InkCss){
    var elm1 = Ink.i('elm1');
    InkCss.toggleClassName(elm1, 'newclass');
    Ink.log(elm1);
    // <div id="elm1" class="newclass">
    InkCss.toggleClassName(elm1, 'newclass');
    Ink.log(elm1);
    // <div id="elm1" class="">
});
</script>