首頁猿問如何使用CSS根據另一個元素的存在...

如何使用CSS根據另一個元素的存在來調整元素的寬度

JavaScript

富國滬深 2023-07-06 14:54:56

我的左邊有一個輸入框，右邊有一個按鈕。在某些頁面上，我想在輸入框旁邊放置一個復選框，并將按鈕移動到下方/下方。有沒有辦法使用 CSS flexbox 或其他東西來做到這一點？我有一個 JavaScript 條件來確定復選框是否應該出現在頁面上，但不確定如何按照上述方式進行布局。<div> <input type="text" />  <button> click me </button></div>

查看完整描述

3 回答

拉丁的傳說

TA貢獻1789條經驗獲得超8個贊

這很簡單adjacent sibling combinator，不需要 JavaScript。只需選擇任何button緊鄰input[type="checkbox"]并使其顯示block（而不是inline）。

input[type="checkbox"] + button {

? display: block;

}

<div>

? <input type="text" />

? <input type = "checkbox" />

? <button> click me </button>

</div>

<div>

? <input type="text" />

? <button> click me </button>

</div>

反對回復 2023-07-06

郎朗坤

TA貢獻1921條經驗獲得超9個贊

您在尋找這樣的東西嗎？

運行下面的代碼片段：

//here we are getting each element by its id

var check = document.getElementById("check");

var input = document.getElementById("input");

var button = document.getElementById("button");

//this is the condition we're using (it could be anything but it was easy to use a boolean for this example)

var bool = false;

//here is the function we're calling on click

function clickMe() {

//when button is clicked we set bool from false to true

bool = true;

//if bool is true we we will apply the following styles to the check and button

if (bool === true) {

check.style.display = "inline-block";

button.style.display = "block";

}

#check {

display: none;

}

<input type="checkbox" id="check"><input id="input"><button id="button" onclick="clickMe();">Click Me</button>

反對回復 2023-07-06

MM們

TA貢獻1886條經驗獲得超2個贊

建議切換父級的樣式

function toggleClass() {

const element = document.getElementById("container")

element.classList.toggle("toggle");

}

#checkbox {

display:none;

}

.toggle #checkbox {

display:block;

}

<button onClick="toggleClass()">Button</button>

</div>

反對回復 2023-07-06

3 回答
0 關注
295 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用CSS根據另一個元素的存在來調整元素的寬度

如何使用CSS根據另一個元素的存在來調整元素的寬度

3 回答

添加回答