如何通過javascript設置html屬性值？

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多種方式， 這裏有幾個方法

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