Hướng dẫn how do you style a button in javascript? - làm thế nào để bạn tạo kiểu cho một nút trong javascript?

0

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Xin chào, tôi thực sự đang vật lộn với việc tạo kiểu cho nút Thêm bên trong mã này

Tôi chỉ đang học JavaScript, vì vậy thật khó hiểu khi gọi cho lớp CSS.

Kiểm tra Fiddle JS.

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

Cố gắng tạo kiểu cho dòng này >>

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

Cảm ơn vì bất kỳ phản hồi.

Jonathan m

16.9k9 Huy hiệu vàng56 Huy hiệu bạc91 Huy hiệu Đồng9 gold badges56 silver badges91 bronze badges

Hỏi ngày 28 tháng 10 năm 2014 lúc 21:37Oct 28, 2014 at 21:37

9

Tôi sẽ đề nghị thêm một lớp vào nút và tạo kiểu cho nó theo cách đó.

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

Sau đó trong CSS:

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

Bạn nên đưa ra một tên lớp có ý nghĩa hơn "My-Button", nhưng bạn có ý tưởng. Điều này thật tuyệt vì bạn có thể sử dụng lại lớp đó sau nếu bạn cần. Ví dụ: nếu bạn có một liên kết cũng cần trông giống như nút này, bạn có thể làm một cái gì đó như:

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

Chỉnh sửa: JSfiddle với lớp được thêm vào nút đầu tiên: http://jsfiddle.net/yplqjmwa/

Đã trả lời ngày 28 tháng 10 năm 2014 lúc 21:46Oct 28, 2014 at 21:46

Steve Sanderssteve SandersSteve Sanders

8.1482 Huy hiệu vàng29 Huy hiệu bạc32 Huy hiệu Đồng2 gold badges29 silver badges32 bronze badges

2

Nếu bạn chỉ muốn thay đổi nút Thêm và không phải mọi nút trong bố cục, trước hết, bạn nên thêm một lớp vào nút Thêm: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('ch2').rowIndex)" />

Khi nó có lớp được chỉ định, bạn nên chọn nó trong CSS như thế này:

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

Bạn chỉ có thể sử dụng bộ chọn .add-Button nhưng hãy nhớ rằng bộ chọn đầu vào có ưu tiên so với các bộ chọn lớp. Nếu bạn muốn chắc chắn rằng bạn có thể tùy chỉnh nút của mình hoàn toàn sử dụng phương thức ở trên.

Đã trả lời ngày 28 tháng 10 năm 2014 lúc 21:51Oct 28, 2014 at 21:51

Phob1aPhob1aPhob1a

7031 Huy hiệu vàng10 Huy hiệu bạc19 Huy hiệu đồng1 gold badge10 silver badges19 bronze badges

2

Bạn nên sử dụng một số CSS để tạo kiểu nút và bảng. Xem sửa đổi của tôi đối với Fiddle JS của bạn. http://jsfiddle.net/6xwyc6tn/1/ Đã thêm các lớp sau:

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

Lưu ý rằng các kiểu đã được truyền cảm hứng rất nhiều bởi Bootstrap vì nó thật tuyệt vời: D http://getbootstrap.com/

Đã trả lời ngày 28 tháng 10 năm 2014 lúc 21:53Oct 28, 2014 at 21:53

2

Thay vì tạo kiểu cho nút, tôi sẽ thêm một phần tử div theo kiểu có một sự kiện JavaScript trên nó như thế này: HTML

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

CSS (Tôi chỉ làm một chút kiểu dáng cho các ví dụ)

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

JavaScript

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

Đã trả lời ngày 28 tháng 10 năm 2014 lúc 21:57Oct 28, 2014 at 21:57

Bạn có thể tạo kiểu trong JavaScript?

Bạn có thể tạo kiểu cho một nút trong HTML không?

Làm thế nào tôi có thể tạo kiểu cho nút của mình trong CSS?

Làm thế nào để bạn mã hóa một nút trong JavaScript?