如何设计一个javascript按钮？

你好，我真的很难与造型的代码里面的添加按钮如何设计一个javascript按钮？

我只是学习的JavaScript，所以它有点混淆在哪些要求的CSS类。

查看js小提琴。

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

Attemping样式此行>>

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

感谢任何回应。

来源

2014-10-28 infinityswift

什么风格的信息你要补充的吗？ – 2014-10-28 21:38:31

使用'input [type =“button”]'作为选择器，并添加任何你想要的。 – 2014-10-28 21:42:04

检查出jsfiddle的CSS在那里，我只是不知道什么元素来调用JavaScript按钮。 – infinityswift 2014-10-28 21:42:08

我会建议在按钮中添加一个类并为其设置样式。

<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/

来源

2014-10-28 21:46:21

真棒，是啊，我知道:)你可以试试JS的小提琴？我认为它会给你更多的信息，我正在努力与 – infinityswift 2014-10-28 21:49:34

@infinityswift刚刚编辑我的答案与更新的小提琴的链接。 – 2014-10-28 21:50:59

谢谢你真的帮助 – infinityswift 2014-10-28 21:54:36

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

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

JS Fiddle demo。

你的CSS似乎被应用。

参考文献：

CSS attribute-presence and value selectors。

来源

2014-10-28 21:51:39

谢谢:)是啊，你的权利 – infinityswift 2014-10-28 21:53:14

你非常欢迎;我很高兴我可以帮忙！ – 2014-10-28 21:53:57

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

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

一旦分配了类你应该在这样的CSS选择它：

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

你只能使用。新增按钮选择，但请记住，输入选择拥有一流的选择偏好。如果您想确保您可以完全使用上述方法自定义按钮。

来源

2014-10-28 21:51:49 Phob1a

是的，你有多少个子类？ – infinityswift 2014-10-28 22:30:06

这是可能的 – infinityswift 2014-10-28 22:31:52

@infinityswift您可以根据需要使用尽可能多的类，但语法如下：。切勿在班级名称中使用空格，因为空格分隔不同的班级。 – Phob1a 2014-10-29 08:40:56

您应该使用一些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; 
}

注意，风格都深受引导启发，因为它是真棒：d http://getbootstrap.com/

来源

2014-10-28 21:53:12 HitMeWithYourBestShot

Yea bootstrap是。你知道任何有用的按钮吗？除了颜色的变化。 – infinityswift 2014-10-28 22:17:54

你可以用JavaScript做一个jQuery。例如，你可以有一个“时钟”，告诉你当你悬停在它上面的时间。您可以更改按钮图像，使其看起来像是一个熄灭的灯光，并且在它上面徘徊时会切换为“亮起”的图像。如果你能想到它，你可以用一些创意编码来做。 – HitMeWithYourBestShot 2014-10-28 22:42:35

相反造型的按钮，我想补充一个样式的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));

来源

2014-10-28 21:57:07

如何设计一个javascript按钮？

回答

相关问题