JS得到div的value值(网上资料保存)

function getDivValue(){
    var t1=document.getElementById("test"); 
    alert(t1.value);
}


<div id="test" value="yes" > </div>


<!--对于以上的HTML代码 我们通过JS直接得到div的value属性是得不到的,输出为undefined
这是因为div没有value属性  所以这样是得不到的  要用t1.getAttribute("value");得到-->





<!--但是我们用dom 创建的div对象却可以直接用 obj.value得到-->






var obj=documnet.createElement("div");


obj.value="hi";


alert(obj.value);



<!--这里将输出hi-->
<!--看到这里 你可能会对我上面说的div没有value属性感到怀疑了 ,那么div到底有没有value属性呢 ?
答案是没有的,
 那么为什么下面的方式可以直接通过obj.value得到呢?  
那是因为document.cteateElement  创建并不是一个严格意义上的 div标签
 而是一个自定义的叫div的对象标签 然后又定义了一个叫value的属性
(obj.value="hi" 在JS中代表定义obj的一个熟悉叫value 同时赋值为"hi")
看到这里相比你已经明白了 -->
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以通过以下代码实现: HTML部分: ```html <div class="editable">这是可编辑的内容</div> ``` CSS部分: ```css .editable { display: inline-block; border: 1px solid #ccc; padding: 5px; } .editable input { display: block; border: none; padding: 0; margin: 0; } .editable input:focus { outline: none; } .editable .save-btn, .editable .cancel-btn { display: none; } .editable:hover { border-color: #333; cursor: pointer; } .editable:hover input { display: block; width: 100%; } .editable:hover .save-btn, .editable:hover .cancel-btn { display: inline-block; margin-left: 5px; } ``` JS部分: ```javascript const editable = document.querySelector('.editable'); const originalContent = editable.innerText; editable.addEventListener('mouseenter', () => { const input = document.createElement('input'); input.value = originalContent; editable.innerText = ''; editable.appendChild(input); const saveBtn = document.createElement('button'); saveBtn.innerText = '保存'; saveBtn.classList.add('save-btn'); editable.appendChild(saveBtn); const cancelBtn = document.createElement('button'); cancelBtn.innerText = '取消'; cancelBtn.classList.add('cancel-btn'); editable.appendChild(cancelBtn); }); editable.addEventListener('mouseleave', () => { const input = editable.querySelector('input'); const saveBtn = editable.querySelector('.save-btn'); const cancelBtn = editable.querySelector('.cancel-btn'); if (input) { editable.innerText = input.value; } if (saveBtn) { saveBtn.remove(); } if (cancelBtn) { cancelBtn.remove(); } }); ``` 这段代码实现了当鼠标移动到可编辑的div上时,将div的内容变成一个input框,并显示保存和取消按钮。当鼠标离开时,会根据用户的操作来决定是否保存修改的内容。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值