html - how to style a javascript button? - Stack Overflow

admin管理员组

文章数量:1387354

Hello I am really struggling with styling the add button inside of this code

I am just learning javascript , so it is kinda confusing on which to call for the css class.

Check out the js fiddle.

/

Attemping to style this line >>

 <input type="button" value="Add" onclick="addItem(document.getElementById('ch1').rowIndex)" />

Thanks for any response.

Hello I am really struggling with styling the add button inside of this code

I am just learning javascript , so it is kinda confusing on which to call for the css class.

Check out the js fiddle.

http://jsfiddle/infinityswift19/6xwyc6tn/

Attemping to style this line >>

 <input type="button" value="Add" onclick="addItem(document.getElementById('ch1').rowIndex)" />

Thanks for any response.

• javascript
• html
• css
• styles

Share Improve this question Follow edited Oct 28, 2014 at 21:37 Jonathan M 17.5k99 gold badges6060 silver badges9494 bronze badges asked Oct 28, 2014 at 21:37 infinityswiftinfinityswift 511 gold badge11 silver badge88 bronze badges 9

• What style info do you want to add? – Jonathan M Commented Oct 28, 2014 at 21:38
• 1 Use input[type="button"] as a selector, and add whatever you want to that. – user1864610 Commented Oct 28, 2014 at 21:42
• check out the jsfiddle the css is there , i just dont know what element to call the javascript button. – infinityswift Commented Oct 28, 2014 at 21:42
• 2 How is that "a JavaScript button" as opposed to "an HTML button"? – David Thomas Commented Oct 28, 2014 at 21:42
• it isnt , i just found this code and cant style it . – infinityswift Commented Oct 28, 2014 at 21:44

 |  Show 4 more ments

5 Answers 5

Sorted by: Reset to default 0

I would suggest adding a class to the button and styling it that way.

<input class="my-button" type="button" value="Add" onclick="addItem(document.getElementById('ch1').rowIndex)" />

Then in CSS:

.my-button {
    any styles you want go here
}

You should e up with a more meaningful class name than "my-button", but you get the idea. This is nice because you can reuse that class later if you need to. For example, if you have a link that also needs to look the same as this button, you can do something like:

<a href="http://wwww.google." class="my-button">Google Button</a>

Edit: JSFiddle with class added to first button: http://jsfiddle/ypLqjmwa/

Interestingly, when you use the correct syntax:

input[type="button"] {
    border-color:#333;
}

JS Fiddle demo.

Your CSS seems to be applied.

References:

• CSS attribute-presence and value selectors.

If you want to change only the add button and not every button in the layout you should first of all add a class to the add button:

<input type="button" class="add-button" value="Add" onclick="addItem(document.getElementById('ch1').rowIndex)" />

Once it has the class assigned you should select it in the css like this:

input[type="button"].add-button{ /*styles*/ }

You could only use the .add-button selector but remember that the input selector has preference over class selectors. If you want to be sure you can customize your button pletely use the method above.

You should use some CSS to style the button and the table itself. See my modifications to your JS fiddle. http://jsfiddle/6xwyc6tn/1/ Added the following classes:

.td-no{
    border:0px;
}
table,tr{
    border:0px;
}
.btn-orange{
    background-color:#D25D12;
    color:white;
}
.btn-orange:hover{
    background-color:#D6A800;
    color:white;
}
.btn-purple{
    background-color:#4F3674;
    color:white;
}
.btn{
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
}

Note that the styles were heavily inspired by Bootstrap because it is awesome :D http://getbootstrap./

Instead of styling the button, I would add a styled div element that has a javascript eventlistener on it like this: HTML

<td><div id="button">Add</div></td>

CSS (I just did a bit of styling for examples)

div#button {
display:block;
background:lightblue;
padding:5px;
border-radius:5px;
}

javascript

document.getElementById('button').addEventListener('click', addItem(document.getElementById('ch2').rowIndex));

本文标签： htmlhow to style a javascript buttonStack Overflow