如何从输入中手动设置css样式

How to set manually the css style from an input?

本文关键字：设置 css 样式 输入      更新时间：2023-09-26

我想在之后更改css样式以获得成功。

我有以下代码，但它不起作用：

<style>
  #byDeafult .has-success .input-group-addon {
    color: #555;
    background-color: #eee;
    border-color: #ccc;
  }
</style>
<span id="span1WidthExpMap" class="input-group-addon">X:</span>
<input id="inputWidthExpMap" type="text" class="form-control">
<span id="span2WidthExpMap" class="input-group-addon">px</span>
<script>
  $('span1WidthExpMap').addClass('byDeafult');
  $('inputWidthExpMap').addClass('byDeafult');
  $('span2WidthExpMap').addClass('byDeafult');
</script>

怎么了？

元素的ID需要前缀为#，请参见[ID Selector（"#ID"）](http://api.jquery.com/id-selector/)

$('#span1WidthExpMap').addClass('byDeafult');

此外，您已经将CSS类定义为#byDeafult，您需要将其定义为.byDeafult

它还可以更好地将代码包装在$（document）.ready（）处理程序中

  .byDeafult {
    color: #555;
    background-color: #eee;
    border-color: #ccc;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="span1WidthExpMap" class="input-group-addon">X:</span>
<input id="inputWidthExpMap" type="text" class="form-control">
<span id="span2WidthExpMap" class="input-group-addon">px</span>
<script>
  $('#span1WidthExpMap').addClass('byDeafult');
  $('#inputWidthExpMap').addClass('byDeafult');
  $('#span2WidthExpMap').addClass('byDeafult');
</script>

对对象使用jquery id选择器#

<script>
     $(function () {
     $('#span1WidthExpMap').addClass('byDeafult');
     $('#inputWidthExpMap').addClass('byDeafult');
     $('#span2WidthExpMap').addClass('byDeafult');
});
</script>
相关文章：