javascript - 使用 JQuery 从输入数字中获取值并更改 css

Question

<img src="purplemoon.png" alt="Purple moon" id="moon-photo" />   
<table>
  <tr>
    <th colspan="4">Control panel</th>
  </tr>
  <tr>
    <td>
      <!-- trying to take value from that input -->
      <input type="number" min="0" max="50" class="br-left" />
    </td>
  </tr>
</table>

<script>
    $(document).ready(function(){   
        $('.br-left').on("change",function(){
        $('#moon-photo').css('border-top-left-radius',$('.br-left').val());
    });
});
</script>

我试图从该输入数字中获取值并将 border-radius 放在左上角，但它不起作用。

Answer 1

记住单位。

注意:您不必在 css 函数中再次选择 input 元素，使用 this 改为关键字。

$(document).ready(function() {
  $('.br-left').on("change", function() {
    $('#moon-photo').css('border-top-left-radius', $(this).val() + 'px');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Purple moon" id="moon-photo" />
<table>
  <tr>
    <th colspan="4">Control panel</th>
  </tr>
  <tr>
    <td>
      <!-- trying to take value from that input -->
      <input type="number" min="0" max="50" class="br-left" />
    </td>
  </tr>
</table>