无法使用 javascript 编辑 css答案

【问题标题】：unable to edit css with javascript无法使用 javascript 编辑 css
【发布时间】：2013-05-15 16:55:51
【问题描述】：

我正在尝试用这些简单的方法编辑我的表单

测试：

<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 链接时，我可以查看隐藏的字段。我在做什么错？

【问题讨论】：

你有一个span 和一个id 的aa 和一个input 和一个id 的aa 这是无效的。

标签： javascript css hidden-field

【解决方案1】：

display没有hidden属性，需要使用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";
}

【讨论】：

"hidden" 是 visibility 的有效值，但不是 display。
我不会说 HTML 是这里的问题。是的，拥有更好的命名约定会有所帮助，这样您就不会感到困惑。
根据我对 HTML 无效问题的评论，我收回了这一点。 aa 的 ID 在第二个 span 和 input 里面。

【解决方案2】：

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

在 javascript 中使用 vale "none" 显示隐藏元素的样式属性
元素“aa”是元素“a”的子元素。所以当你使用
document.getElementById("a").style.display="none"; 也隐藏了元素“aa”

所以你可能想要的最终解决方案如下

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

【讨论】：