Question

您好我正在努力设计此代码中的添加按钮

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

查看js小提琴。

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

尝试设置此行的样式＆gt;＆gt;

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

感谢您的回复。

Answer 1

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

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

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

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

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

Answer 2

我建议在按钮上添加一个类并按照这种方式设置样式。

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

然后在CSS中：

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

你应该提出一个比＃34; my-button＆＃34;更有意义的课程名称，但你明白了。这很好，因为如果需要，您可以稍后重用该类。例如，如果您的链接也需要与此按钮相同，则可以执行以下操作：

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

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

Answer 3

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

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

JS Fiddle demo

您的CSS似乎已应用。

参考文献：

CSS attribute-presence and value selectors。

Answer 4

您应该使用一些CSS来设置按钮和表格的样式。看看我对你的JS小提琴的修改。 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的启发，因为它非常棒：D http://getbootstrap.com/

Answer 5

我会添加一个带有javascript eventlistener的样式div元素，而不是样式化按钮，如下所示： 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));

如何设置javascript按钮的样式？

5 个答案: