使用 Onchange 添加 css答案

【问题标题】：Add css using Onchange使用 Onchange 添加 css
【发布时间】：2016-03-02 07:38:47
【问题描述】：

如何在 JavaScript 中更改代码 CSS`？

HTML：

<input type="text" name="text_field"  value="text" id ="hd" />

<div id="color">
    <input type="text" name="color" class ="border-bottom" value=""/>
</div>

Javascript：

$(document).ready(function() {
     $('#color input').change(function(){
          var css = $(this).attr("class");
          var z   = string(css);  // change type to string
          var x   = z+': 1px solid'; // mix 
          $("#hd").css(css,$(this).val());
     });
});

我需要在字段中写入1px solid，我尝试将border-bottom 和1px solid 混合到新变量（border-bottom : 1px solid），然后我只需输入红色/蓝色/dll 等颜色类型。

更多了解请看这里https://jsfiddle.net/1Lmhj3xp/1/

【问题讨论】：

+px ?你错过了吗？
@RayonDabre 我尝试将其设为默认border-bottom:1px solid，因此用户只需输入下划线的颜色
无法理解你想要什么 :) 也许这会有所帮助：jsfiddle.net/8hrmgko4
@BobSponge 是这样的，谢谢 :)

标签： javascript jquery html css

【解决方案1】：

您可以使用(css, x + this.value) 来设置css。

$('#color input').change(function() {
  var css = $(this).attr("class");
  var x = '1px solid '; // mix 
  $("#hd").css(css, x + this.value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="text_field" value="text" id="hd" />
<br><br>
<div id="color">
  <input type="text" name="color" class="border-bottom" value="" placeholder="Enter color"/>
</div>

【讨论】：

【解决方案2】：

change 事件未用于跟踪文本字段中的更改，您应该改用 keypress 或 ipnput 事件：

$('#color input').on('input', function(){

如果您只想输入颜色，可以将 1px solid 固定为静态：

$("#hd").css(css, "1px solid "+$(this).val());

希望这会有所帮助。

片段

$(document).ready(function() {
  $('#color input').on('input', function(){
        var css = $(this).attr("class");
        $("#hd").css(css, "10px solid "+$(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
TEXT <input type="text" name="text_field"  value="text" id ="hd" />

<div id="color">
	CSS <input type="text" name="color" class ="border-bottom" value=""/>
</div>
Try input in CSS 1px solid red (onchange)

【讨论】：