css 使用parseInt()在div元素上输入自定义高度和宽度的文本字段

gojuced7 于 2023-03-20 发布在其他

关注(0)|答案(2)|浏览(117)

使用2个单选按钮和1个文本字段，可以给予元素自定义高度和宽度：

$(document).ready(function() {
  $('#btnSetColor').on('click', function() {

    const DeBreedte = $('#txtKeuze').val();
    const DeHoogte = $('#txtKeuze').val();

    const keuze = $('input:checked').attr('id');

    if (keuze === 'DeHoogte') {

      $('#divResult').css('height', DeHoogte + 'px');

    } else if (keuze === 'DeBreedte') {

      $('#divResult').css('width', DeBreedte + 'px');
    }
  });
});

<input type="radio" id="DeHoogte" name="type" />Hoogte
<input type="radio" id="DeBreedte" name="type" />Breedte<br />

<input type="text" id="txtKeuze" placeholder="Uw waarde..." />

<button id="btnSetColor">Stel in</button><br />
<div id="divResult">Voorbeeld tekst</div>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

现在我正在寻找一个基于2个文本字段的设置，以便使用**parseInt（）**函数输入自定义的宽度和高度。
非常感谢您的帮助！

css

来源：https://stackoverflow.com/questions/75771901/input-textfield-for-a-custom-height-and-width-on-a-div-element-with-parseint

2条答案

按热度按时间

mec1mxoz1#

据我所知，这里不需要parseInt，只要使用HTMLInputElement的valueAsNumber属性，就可以直接作为style应用。

const hoogte = document.getElementById('Hoogte'),
  breedte = document.getElementById('Breedte'),
  btnSetColor = document.getElementById('btnSetColor'),
  divResult = document.getElementById('divResult');

btnSetColor.onclick = function() {
  divResult.style.height = `${hoogte.valueAsNumber}px`;
  divResult.style.width = `${breedte.valueAsNumber}px`;
};

#divResult {
  background: lightgrey;
}

<input type="number" id="Hoogte" placeholder="Hoogte..." />
<input type="number" id="Breedte" placeholder="Breedte..." />
<button id="btnSetColor">Stel in</button>
<div id="divResult">Voorbeeld tekst</div>

赞(0）回复(0）举报 2023-03-20

cvxl0en22#

好了，据我所知，你想切换的值是在输入中设置的，div的高度和宽度。
你可以做这样的事情。

<form id="programmable-div-config">
    <input type="radio" name="side" value="width">width</input>
    <input type="radio" name="side" value="height">height</input>
    <input type="text"  name="size"/>
    <button type="submit">set</button>
</form>
<div id="programmable-div" style="background-color:red;width:50px;height:50px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#programmable-div-config").on("submit", function(event) {
  event.preventDefault();
  const params = new URLSearchParams($(this).serialize());
  const side = params.get("side");
  const size = params.get("size");
  $("#programmable-div").css(side, size+"px");
})
</script>

赞(0）回复(0）举报 2023-03-20

我来回答

css 使用parseInt()在div元素上输入自定义高度和宽度的文本字段

2条答案

相关问题

热门标签

最新问答