<div class="layui-input-suffix Unit"> 任意单位 </div> 点击添加属性display:none 再次点击删除属性 display:none
时间: 2023-11-28 10:47:17 浏览: 89
这是一个HTML的代码段,其中包括一个class为"layui-input-suffix Unit"的div元素。你可以通过CSS样式控制该元素的显示方式。在该元素上添加属性"display:none"会使其在页面中不可见,再次点击删除该属性会使其重新显示。下面是示例代码:
```html
<div class="layui-input-suffix Unit" onclick="toggleDisplay()">任意单位</div>
<script>
function toggleDisplay() {
var elem = document.querySelector('.layui-input-suffix.Unit');
if (elem.style.display === 'none') {
elem.style.display = '';
} else {
elem.style.display = 'none';
}
}
</script>
```
这里添加了一个onclick事件,每次点击div元素时都会调用toggleDisplay()函数来切换display属性的值。
相关问题
如何通过id=‘time1’获取‘秒’这个内容?:<div class="layui-inline" id="time1"> <label class="layui-form-label">时间:</label> <div class="layui-input-block"> <input type="number" name="time" placeholder="请输入时间" min="0" max="5400" lay-verify="number|time" autocomplete="off" class="layui-input"> <div class="layui-input-suffix layui-input-split"> 秒 </div> </div> </div>
可以使用JavaScript中的getElementById方法获取该元素节点,然后使用innerHTML或innerText属性获取该节点中的文本内容。具体代码如下:
```javascript
var time1 = document.getElementById("time1"); // 获取id为time1的元素节点
var seconds = time1.getElementsByClassName("layui-input-suffix")[0].innerText; // 获取class为layui-input-suffix的元素节点的innerText属性值,即“秒”
console.log(seconds); // 输出“秒”
```
注意:该代码中使用了getElementsByClassName方法获取class为layui-input-suffix的元素节点,因为该节点没有id属性。如果该节点有id属性,也可以使用getElementById方法获取该节点。
<div class="layui-input-suffix Unit" style="display: none"> 元/Nm³ (任意单位) </div> <input type="text" placeholder="请输入" value="元/Nm³" class="layui-input"> 监听input框输入值修改div内文本
可以使用 JavaScript 监听 input 框的输入事件,然后根据输入的值动态修改 div 内的文本。可以使用以下代码实现:
```html
<div class="layui-input-suffix Unit">元/Nm³ (任意单位)</div>
<input type="text" placeholder="请输入" value="元/Nm³" class="layui-input" id="input-unit">
<script>
const input = document.getElementById('input-unit');
const unitDiv = document.querySelector('.layui-input-suffix.Unit');
input.addEventListener('input', e => {
unitDiv.textContent = e.target.value + ' (任意单位)';
});
</script>
```
这样每次输入框的值发生变化,都会触发 `input` 事件,然后将输入框的值和固定字符串拼接起来,赋值给 div 的文本内容。
阅读全文