SCENARIO

Question

我试图达到以下效果：

＆＃13;

    #target { width: 100px; height: 100px; }

＆＃13;

    <form type="submit">
        <label for="width">Width</label>
        <input type="text" id="width" />
        <label for="height">Height</label>
        <input type="text" id="height"/>
        <button type="submit">SEND</button>
    </form>

    <img id="target" src="URL" />

＆＃13;

SCENARIO

将数值插入width和height输入表单，然后点击SEND。
width和height的值分别插入#target的CSS中。

我已经搜索了一段时间，但我无法找到任何相关的解决方案。

Answer 1

使用jQuery。click()，.val()和.css()方法：

  $('button').click(function(event) {
    event.preventDefault();
    var width = $('#width').val();
    var height = $('#height').val();
    $('#target').css('width', width);
    $('#target').css('height', height);
  });

Answer 2

你可以简单地做

var target = document.getElementById("target");
target.style.width = submit.width.value;
target.style.height = submit.height.value;

这样可行，但如果用户未在号码后输入 px ，则可能会失败。为了确保这一点，我会这样做：

    document.getElementById("submit").addEventListener("click", function () {
        var valid = true;

        if (isNaN(parseInt(form.width.value.toLowerCase().replace("px", "")))) {
            document.getElementById("widthError").innerHTML = "Please enter a valid width";
            valid = false;
        }
        if (isNaN(parseInt(form.height.value.toLowerCase().replace("px", "")))) {
            document.getElementById("heightError").innerHTML = "Please enter a valid height";
            valid = false;
        }

        if (valid) {
            var target = document.getElementById("target");
            target.style.width = form.width.value.toLowerCase().replace("px", "") + "px";
            target.style.height = form.height.value.toLowerCase().replace("px", "") + "px";
        }
    })

    //If you have jQuery, which I HIGHLY recommend, you can use the code below:
    //$('#submit').click(function () {
    //    var valid = true;

    //    if (isNaN(parseInt($('#width').val().toLocaleLowerCase().replace("px", "")))) {
    //        $('#widthError').text("Please enter a valid width");
    //        valid = false;
    //    }
    //    if (isNaN(parseInt($('#height').val().toLocaleLowerCase().replace("px", "")))) {
    //        $('#heightError').text("Please enter a valid height");
    //        valid = false;
    //    }

    //    if (valid) {
    //        $("#target").css("width", $("#width").val().toLowerCase().replace("px", "") + "px").css("height", $("#height").val().toLowerCase().replace("px", "") + "px");
    //    }

    //})

<form id="form">
  <label for="width">Width</label>
  <input type="text" id="width" />
  <span id="widthError" style="color:red; margin-right: 5px;"></span>
  <label for="height">Height</label>
  <input type="text" id="height" />
  <span id="heightError" style="color:red; margin-right: 5px;"></span>
  <br />
  <br />
  <button id="submit" type="button">SEND</button>
</form>

<img id="target" src="https://pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z_400x400.jpg" />

虽然我的例子有点粗糙，但这将适用于我能想到的每一种情况。

如果您想知道，我会.toLowerCase().replace("px","") + "px"确保添加 px 部分，否则该属性将不会生效。如果width 94px 或 94 ，它将删除 px 部分（如果没有 px 则不执行任何操作部分）每次获得 94 ，然后附加 px 以获得 94px 。

Answer 3

jquery方式 here is fiddle

$('#submit').click(function(){
heightvalue=$('#height').val();
widthvalue=$('#width').val();
$('#target').css('width',widthvalue+'px').css('height',heightvalue+'px');
});

#target{
  height:50px;
  width:50px;
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="width">Width</label>
    <input type="text" id="width" />
    <label for="height">Height</label>
    <input type="text" id="height"/>
    <button id='submit'>SEND</button>


<div id="target">

</div>

Answer 4

尝试使用addEventListener('click')。

＆＃13;

var send = document.querySelector('#send');

send.addEventListener('click',function(){
  var width = document.querySelector('#width').value;
  var height = document.querySelector('#height').value;
  var img = document.querySelector('#target');
  
  img.style.width = width+'px';
  img.style.height = height+'px';
});

＆＃13;

    <label for="width">Width</label>
    <input type="text" id="width" />
    <label for="height">Height</label>
    <input type="text" id="height"/>
    <button id="send">SEND</button>
    <br>
<img id="target" src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />

＆＃13;

将输入表单值发送到CSS样式属性

SCENARIO

4 个答案: