1

私のコードは次のようになります。テキストボックスに何かを入力し、ドロップダウンを大文字などに変更します。すべてうまく機能しますが、ドロップダウンから「スモールキャップ」を選択しても何も起こりません。ドロップダウンプロパティをバリアントに変更しようとしましたが、まだそうではありません動作していますが、何が問題なのかわからない

<!DOCTYPE html>
<html>
<head>
  <title> - test </title>

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<script type='text/javascript'>
$(window).load(function(){

         $('#ta1').keyup(function(){
                $('#float1').html("<p>"+$(this).val()+"</p>");
            });

            $("#size").change(function() {
                $('#float1').css("text-transform", $(this).val());
            });
});


</script>


</head>
<body>
  <form id="myform">



      <label>Font Style</label>
      <select id="size" >
<option value="0">[No Engraving]</option>
<option value="variant">Small Caps</option>
<option value="uppercase">All Caps</option>
<option value=" lowercase">No Caps</option>
<option value="capitalize">Normal</option>
</select>
    </p>


 </form> 
  <p>
      <label>Top Leg
      <input type="text" name="top_leg" id="ta1" class="changeMe" maxlength="10">(10 char, $1)
      </label>
</p>
<p>
     <label></label>
</p>
<!--Start top leg Div--> 

<div id="container" class="changeMe2" style=" left: 298px;
    position: absolute;
    top: 287px;
    z-index: 999;">
        <div id="float1">
            <p>

            </p>
        </div>
    </div>
<!--Stop top leg Div--> 


</html>


<div>
</body>
4

1 に答える 1

1

text-transform CSS ルールの唯一の有効な属性は次のとおりです。[ [大文字にする | 大文字 | 小文字] || 全角 || 全角カナ】

したがって、小さいキャップ (およびバリアント) は選択するオプションではありません。代わりに、font-variant ルール ( https://developer.mozilla.org/en/CSS/font-variant ) を調べてください。Font-variant の属性は次のとおりです。小型株| 継承します。

https://developer.mozilla.org/en/CSS/text-transform

于 2012-06-05T14:59:59.153 に答える