<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
background-color:#FC3;
width:320px;
height:100px;}
#div2
{
background-color:#999;
width:320px;
height:20px;}

#selId
{
margin-bottom:20px;
margin-top:20px;
}
</style>
</head><body>
<script type="text/javascript">
function selectItem()
{
var selNode = document.getElementById("selId");

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");


var value = selNode.options[selNode.selectedIndex].value;

div1.style.textTransform = value;
div2.innerHTML ="you hava choise: "+value+" ;";

}
</script>
<div id="div1">Every thing has been done ,Do you konw?</div>
<select id="selId" onchange="selectItem()">
<option value="none">...none.....</option>
    <option value="uppercase">....UPPERCASE....</option>
    <option value="lowercase">....lowercase....</option>
</select><div id="div2">you hava choise: none ;</div>
</body>
</html>
问题情况描述: 
1,div2情况显示正常。
2,div1出现异常情况。
  
   默认的选项为none...
   选择uppercase之后,字符串会变成大写。
     此时,如果选择lowercase,字符串不会发生变化。
    选择none,字符串复原。
    
    之后,你可以任意选择lowercase或者uppercase,都之后必须选择none.否则选择对立的大写或者小写div1区域都不会发生任何变化。我用的浏览器是ie7.

解决方案 »

  1.   

    是挺奇怪的,以前没用过这属性,可能是个bug吧,延迟一下可以
            div1.style.textTransform = "none";
            setTimeout(function(){ div1.style.textTransform = value;}, 1);
            div2.innerHTML ="you hava choise: "+value+" ;";
      

  2.   

    我测试可以
    selectItem 改成这样试试 function selectItem()
    {
    var selNode = document.getElementById("selId");
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    div1.style.textTransform = selNode.value;
    div2.innerHTML ="you hava choise: "+value+" ;";
    }