Applying CSS style to a button in Javascript

Question

I need to apply CSS style defined in main.css to a button from a handler class

In JavaScript, I am hiding/displaying a button using eventContext.setDisplay(true/false)

I need to apply CSS style to that button when setDisplay is set to true. The button is visible but not having required style.

app.xml

 <button id="btn1" label="Done"> <eventHandlers id="btn1_eventHandlers"> <eventHandler class="custom.handlers.MyHandler" event="render" id="button1_eventHandlers_render_commitEntry" method="done"/> </eventHandlers> </button> 

done method is defined in MyHandler.js

    done:  function(eventContext) {
        if (count==10)
        {
            eventContext.setDisplay(true);
        }
    }

The button gets displayed on the device. Is there any way to apply CSS style to this button at this point so that it can be displayed in intended format?

Answer 1

Simple:

document.getElementByID('yourThing').style.property = 'whatever';

More info here: http://www.w3schools.com/js/js_htmldom_css.asp

Answer 2

If you already have a class containing the button's style, just select your button and add this css class to it

    document.getElementById("button1_eventHandlers_render_commitEntry").className = "your_class_name";

If you don't have a css file containing this class, you can apply the style this way. Select your element and use the style property, and set your css formatting.

    document.getElementById("elementId").style.color = "red";

    // To use properties with two words like "background-color" use this format "backgroundColor"