как стиль кнопки javascript?

Question

Привет, я действительно борется с стилем кнопки добавления внутри этого кода

Я просто изучаю javascript, так что это путают, чтобы вызвать класс css.

Проверьте скрипт js.

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

Attemping стилизовать эту линию >>

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

Edit: JSFiddle с классом добавлены к первой кнопке: http://jsfiddle.net/ypLqjmwa/

Answer 2

Интересно, что когда вы используете правильный синтаксис:

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

JS Fiddle demo.

Ваш CSS, кажется, применяется.

Ссылки:

• CSS attribute-presence and value selectors.

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

Вместо стилизации кнопки, я хотел бы добавить стилизованный Div элемент, имеет яваскрипта EventListener на него так: 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));