如何设置javascript按钮的样式

Question

你好，我真的很难在这个代码中设置添加按钮的样式

我只是在学习javascript，所以在调用css类时有点困惑。

看看js小提琴。

http://jsfiddle.net/infinityswift19/6xwyc6tn/

尝试设计这条线路>>

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

感谢您的回复。

Answer 1

我建议在按钮中添加一个类，并以这种方式设置它的样式。

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

然后在CSS中：

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

你应该想出一个比"我的按钮"更有意义的类名，但你已经明白了。这很好，因为如果需要的话，你以后可以重用这个类。例如，如果你有一个链接也需要看起来和这个按钮一样，你可以做一些类似的事情：

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

编辑：将类添加到第一个按钮的JSFiddle：http://jsfiddle.net/ypLqjmwa/

Answer 2

有趣的是，当您使用正确的语法时：

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

JS Fiddle演示。

您的CSS似乎已应用。

参考文献：

• CSS属性存在和值选择器

Answer 3

如果您只想更改添加按钮，而不是布局中的每个按钮，您应该首先向添加按钮添加一个类：

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

一旦它分配了类，你应该在css中选择它，如下所示：

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

您只能使用.add按钮选择器，但请记住，输入选择器优先于类选择器。如果你想确保你可以完全自定义你的按钮使用上面的方法。

Answer 4

您应该使用一些CSS来设置按钮和表本身的样式。看看我对你JS fiddle的修改。http://jsfiddle.net/6xwyc6tn/1/添加了以下类别：

.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;
}

注意，这些款式的灵感很大程度上来自Bootstrap，因为它非常棒：Dhttp://getbootstrap.com/

Answer 5

我不设置按钮的样式，而是添加一个样式化的div元素，上面有一个javascript事件监听器，如下所示：HTML

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

CSS（我只是做了一些样式示例）

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

javascript

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