如果按鈕中有外部圖示，我正在嘗試為按鈕提供一些填充。如果有外部圖示，我想以按鈕padding-right: 30px 為例。但是，如果沒有外部圖示，則按鈕不應獲得 30px 填充。目前，即使沒有外部圖示，我仍然遇到 30px padding-right 的問題。例子
有沒有辦法根據是否存在外部圖示來切換 CSS？
這是 HTML 和 CSS：
.btn {
border-radius: 3px;
border: none;
height: 45px;
font-weight: bold;
font-size: 18px;
background: #FFFFF;
color: #515151;
margin-top: 19px;
padding-top: 12px;
border: solid #FFFFFF 1px;
}<a href="......." title="Hello World" class="btn btn-default" role="button" target="_blank">
Button Title
<svg class="svg-inline--fa fa-external-link fa-w-16 pull-right" title="external link icon" aria-labelledby="svg-inline--fa-title-u1BaVqD2mZ2F" data-prefix="far" data-icon="external-link" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<title id="svg-inline--fa-title-u1BaVqD2mZ2F">external link icon</title>
</svg>
<!-- <i title="external link icon"></i> -->
</a>uj5u.com熱心網友回復：
可以通過使用:has()偽選擇器來實作。
.btn:has(svg) {
padding-right: 30px;
}
但:has()目前瀏覽器不支持，所以我建議現在使用它。
但這里有一個解決方法......
也許您可以為圖示本身添加內邊距或邊距。
.btn > svg { margin-right: 30px }
uj5u.com熱心網友回復：
你需要為此使用 js，你不能用純 css 來做到這一點，你可以通過 .style 屬性來做到這一點，每當你希望該按鈕具有 30 px 的 padding-right 時，你應該添加一些 js 例如在這種情況下，我想在單擊事件期間添加此填充：
const btn=document.queryselector(".btn");
btn.addeventlistiner("click",()=>{
btn.style.padding="30px"
})
你當然可以在另一個事件中添加它，這只是一個例子。
快樂編碼??
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/326175.html
標籤：javascript html 查询 css css-选择器
下一篇：如何禁用和啟用標簽點擊