HTML / CSS:如何为Div设置样式，使其与引导按钮的样式/行为相匹配

Question

我有一个网页，使用Bootstrap的按钮class="btn btn-sm btn-outline-primary"。

在同一页上，我使用可点击的Div呈现JavaScript。我给它分配了一个orders-data类：

..。

element.classList.add('orders-data');

我想让Div匹配样式的按钮使用一些CSS。到目前为止，这就是我所拥有的：

CSS

.orders-data {
    border: 1px solid #007bff;
    border-radius: 5px;
    margin-top: 5px;
    padding-left: 10px;
}

.orders-data:hover {
    background-color: #007bff;
    border: 1px solid #007bff;
    color: white;
    border-radius: 5px;
    margin-top: 5px;
    padding-left: 20px;

这似乎很管用。但是，有没有更优雅的方法来做到这一点呢？

谢谢!

Answer 1

您可以使用此样式使Div元素类似于Bootstrap Button。

.orders-data {
  cursor:pointer;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  user-select: none;
  display: inline-block;
  font-weight: 400;
}

.orders-data:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;}

Answer 2

您可以将此样式添加到div中：

​

.orders-data {
    display: block;
    width: 115px;
    height: 25px;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    line-height: 25px;
    background-color: #0d6efd;
    border-color: #0d6efd;
    
}

.orders-data:hover {
    background-color: #007bff;
    border: 1px solid #007bff;
    color: white;
    border-radius: 5px;
    margin-top: 5px;
    padding-left: 20px;
    }

<div class="orders-data"></div>

​

Answer 3

因为:您使用的是：element.classList.add('orders-data');，所以可以将引导类添加到经过循环的元素中，因此需要再次编写它们。

举个例子来说明这个想法：

​

let el = document.querySelector('a');
const classS = ['btn', 'btn-sm', 'btn-outline-primary'];
for (i = 0; i < classS.length; i++) {
  el.classList.add(classS[i])
}

.shadow {
  box-shadow: 2px 2px 2px black
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-sm btn-outline-primary">hello</button>
<a class="shadow" href="#">the world</a>

​

(如果您的元素没有其他类，那么setAttribute马上就可以了)：

​

let el = document.querySelector('a');
el.setAttribute('class','btn btn-sm btn-outline-primary' ) ; 

.shadow {
  box-shadow: 2px 2px 2px black
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-sm btn-outline-primary">hello</button>
<a class="shadow" href="#">the world</a>
<p><code>setAttribute()</code> removes any value already there , shadow class is not there anymore!</p>

​