Adding new buttons using JavaScript createElement: CSS styles

[fanqiao...@gmail.com]

Hi all,

I am trying to make some new buttons pop up in appropriate places when the subject clicks on a pre-existing button. For that, I am using the JavaScript function createElement. For example, my JS code looks like:

var new_button = document.createElement("button");
new_button.innerHTML = "XXX";
new_button.id = "YYY";
document.getElementById("ZZZ").appendChild(new_button);

My question is one about the complete CSS styles of the default oTree buttons: I want to make my new buttons homogeneous in style as the old pre-existing buttons. If I just create the new buttons the way above, they will look ugly (black text, grey background color, etc). On the other hand, the default oTree buttons have white text and blueish background color, for example; if you simply add buttons to your oTree HTML code, those buttons will already look that way.

To achieve my goal, I will need to:

1) either find a shortcut;

2) get a complete list of the CSS styles of the default oTree buttons (including padding, etc), and add those to my new buttons in JS one by one.

I appreciate your comments. Thanks a lot!

Best,

Tony

[Chris @ oTree]

In your browser, click "view source" and you can see the source code of oTree's buttons including the class names that control its styling.

[fanqiao...@gmail.com]

Thanks! This solves the problem.