Javascript使用选项将单列html更改为多列
Javascript使用选项将单列html更改为多列
提问于 2018-10-21 05:12:20
我想从select选项中获取x值，以便用javascript更改css样式中的x，到目前为止，我使用url变量来更改它。下面是示例：
<select name='X'>
<option value = '1'>1 col</option>
<option value = '2'>2 col</option>
<option value = '3'>3 col</option>
<option value = '4'>4 col</option>
<option value = '5'>5 col</option>
</select>css：
tr:nth-child(Xn+1) {
clear: left;
}完整示例请查看JSFiddle
我想用Javascript来改变x的值，有人能帮我吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-21 05:16:38
一种选择是，每次更改<select>时，使用所需的CSS将其分配给动态<style>标记：
function changeCols(cols) {
style.textContent = `
tr:nth-child(${cols}n+1) {
clear: left;
}
`;
}
const style = document.head.appendChild(document.createElement('style'));
changeCols(5);
const select = document.querySelector('select');
select.onchange = () => {
changeCols(select.value);
};table {
display: block;
}
tr {
display: inline-block;
float: left;
border: solid 1px;
width: 4em;
}
td {
display: inline;
}<select name='x'>
<option value = '1'>1 col</option>
<option value = '2'>2 col</option>
<option value = '3'>3 col</option>
<option value = '4'>4 col</option>
<option value = '5' selected>5 col</option>
</select>
<br/><br/>
<table>
<thead>Details</thead>
<tbody>
<tr>
<td>abc</td>
</tr>
<tr>
<td>def</td>
</tr>
<tr>
<td>ghi</td>
</tr>
<tr>
<td>jkl</td>
</tr>
<tr>
<td>mno</td>
</tr>
<tr>
<td>pqr</td>
</tr>
<tr>
<td>stu</td>
</tr>
<tr>
<td>vwx</td>
</tr>
<tr>
<td>zab</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>def</td>
</tr>
<tr>
<td>ghi</td>
</tr>
<tr>
<td>jkl</td>
</tr>
<tr>
<td>mno</td>
</tr>
<tr>
<td>pqr</td>
</tr>
<tr>
<td>stu</td>
</tr>
<tr>
<td>vwx</td>
</tr>
<tr>
<td>zab</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>def</td>
</tr>
<tr>
<td>ghi</td>
</tr>
<tr>
<td>jkl</td>
</tr>
<tr>
<td>mno</td>
</tr>
<tr>
<td>pqr</td>
</tr>
<tr>
<td>stu</td>
</tr>
<tr>
<td>vwx</td>
</tr>
<tr>
<td>zab</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>def</td>
</tr>
<tr>
<td>ghi</td>
</tr>
<tr>
<td>jkl</td>
</tr>
<tr>
<td>mno</td>
</tr>
<tr>
<td>pqr</td>
</tr>
<tr>
<td>stu</td>
</tr>
<tr>
<td>vwx</td>
</tr>
<tr>
<td>zab</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>def</td>
</tr>
<tr>
<td>ghi</td>
</tr>
<tr>
<td>jkl</td>
</tr>
<tr>
<td>mno</td>
</tr>
<tr>
<td>pqr</td>
</tr>
<tr>
<td>stu</td>
</tr>
<tr>
<td>vwx</td>
</tr>
<tr>
<td>zab</td>
</tr>
</tbody>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52910159
复制相关文章
相似问题