Question

如何在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/

Answer 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>

Answer 2

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

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

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

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

希望这有帮助。

段

＆＃13;

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

＆＃13;

<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)

＆＃13;

使用Onchange添加css

2 个答案:

段