Question

我正在尝试使用用户文本框答案中的值来更改图像的CSS。我想在单击按钮时更改图像边框宽度。这是我到目前为止所做的。

$('#submit').click(function () {
        var bv = $('#border').val();
        $('#pic').css('border-width', bv);
        });

#submit是按钮ID，＃border是文本框ID，＃pic是图像ID。感谢所有建议。

Answer 1

试试这个

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#submit').click(function () {
            var bv = $('#border').val();
            $('#pic').css('border-style', 'solid');//You should use this line of code to get your requirement
            $('#pic').css('border-width', bv);
        });
    });
</script>

<input type="text" id="border">
<input type="button" id="submit" value="submit">
<img src="http://wallruru.com/wp-content/uploads/2014/08/White-Background-56.jpg" id="pic"/>

Answer 2

也许您忘记为图像添加边框颜色和边框样式，因此在添加边框宽度时不会显示任何内容。

这就是我尝试（以及我认为你在做什么）并且工作正常。

<强> JS

$(function(){
    $('#submit').click(function () {
        var bv = $('#border').val();
      $('#pic').css('border-width', bv);
    });
});

<强> CSS

#pic {
  border: 0 black solid;
}

<强> HTML

<input type="text" id="border" />
<button id="submit">Click</button>

<img src="" id="pic">

查看此codepen。

Answer 3

您的代码没有任何问题。您可能想要检查或添加边框样式到图像。您可能正在添加边框宽度而没有边框。

我尝试了这段代码，在添加了

的边框后，它运行得很好

.imageName{
border:1px solid black;
}

$('#submit').click(function () {
   var bv = $('#border').val();
   $('#pic').css('border-width', bv);
   // you can also try this to make it smoother
   $('#pic').animate({'border-width': bv + 'px'});
});

Answer 4

对您的代码进行两次更正

您必须首先提供其他边框参数，以保持border-width动态。
你必须连接＆＃34; px＆＃34;到你的border-width变量

<强>的JavaScript

$('#submit').click(function () {
    var bv = $('#border').val();
    $('#pic').css('border-style', 'solid');
    $('#pic').css('border-color', 'black');
    $('#pic').css('border-width', bv+"px");
});

这是一个有效的fiddle

使用文本框值更改按钮上的CSS单击

4 个答案: