Question

考虑一下代码：

<input type="1 == 1 ? 'radio' : 'checkbox'" value="myValue"/>

但它呈现为文本框输入。似乎javascript没有设置type值。

如何通过javascript设置html属性值？

Answer 1

Javascript引擎不会将随机HTML属性解释为源代码。当然你不能像你想做的那样去做。考虑这样的事情：

<input type="text" value="myValue"/>
<script>
  var input = document.querySelector('input');
  input.type = 1 == 1 ? 'radio' : 'checkbox'
</script>

Answer 2

快速但不太优雅的解决方案是将<input>代码更改为

<input id="inputFoo" value="myValue"/>

然后在其后面加上一对带有类型更改代码的<script>标记。

<script>
    if(1 == 1) {
        document.getElementById("inputFoo").type = "radio";
    } else {
        document.getElementById("inputFoo").type = "checkbox";
    }
</script>

或者更确切地说：

<script>
    document.getElementById("inputFoo").type = (1 == 1 ? 'radio' : 'checkbox')
</script>

Answer 3

HTML输入类型文本是设置的默认类型。 HTML无法进行条件检查，这就是将默认类型分配给输入的原因。

您可以使用javascript以多种方式添加type属性，这里有几种方法

<input id="inputTag" value="myValue" />
<script>
    var input = document.getElementById('inputTag');
    input.type = 1 == 1 ? 'radio' : 'checkbox'
</script>

或者，使用容器div来插入输入html，如下所示

<div id="container"></div>
<script>
    var div = document.getElementById('container');
    div.innerHTML = 1 == 1 ? '<input type="radio" value="myValue" />' : '<input type="checkbox" value="myValue" />'
</script>

如果您使用类似于jsp的服务器端呈现，则可以在服务器端执行条件检查，并在不使用javascript的情况下呈现适当的HTML。

如何通过javascript设置html属性值？

3 个答案: