无法使用javascript编辑css

时间:2013-05-21 02:35:35

标签: javascript css hidden-field

我正在尝试使用这些简单的

编辑我的表单

testings:

<span id="a">30 <span id="aa" style="display:none;"><input type="text" id="aa" name="q"/></span></span>
<span id="cq"><a href="javascript:changeQty()">Change</a></span>
<span id="cq2" style="display:none"><a href="javascript:save()">save</a></span>

<script>
  function changeQty(){
    document.getElementById("a").style.display="hidden";
    document.getElementById("aa").style.display="inline";
    document.getElementById("cq").style.display="hidden";
    document.getElementById("cq2").style.display="inline";
  }
</script>

但奇怪的是,我试图隐藏这些字段是行不通的。但是,当我点击Change链接时,我可以查看隐藏的字段。我做错了什么?

2 个答案:

答案 0 :(得分:7)

hidden没有display属性,您需要使用none

function changeQty(){
  document.getElementById("a").style.display="none";
  document.getElementById("aa").style.display="inline";
  document.getElementById("cq").style.display="none";
  document.getElementById("cq2").style.display="inline";
}

答案 1 :(得分:1)

你做了两个非常简单的错误

  1. 在javascript中使用值“none”作为隐藏元素的显示样式属性

  2. 元素“aa”是元素“a”的子元素。所以当你使用
    时 的的document.getElementById( “A”)的style.display = “无”; 也隐藏元素“aa”

  3. 所以您可能需要的最终解决方案如下

    <span id="a">30</span>
    <span id="aa" style="display:none;"><input type="text" id="aa" name="q"/></span>
    <span id="cq"><a href="javascript:changeQty()">Change</a></span>
    <span id="cq2" style="display:none"><a href="javascript:save()">save</a></span>
    
    <script>
      function changeQty() {
        document.getElementById("a").style.display="none";
        document.getElementById("aa").style.display="inline";
        document.getElementById("cq").style.display="none";
        document.getElementById("cq2").style.display="inline";
       }
    </script>