2、其次使用button标签创建一个按钮,给button绑定onclick点击事件,当按钮被点击时,执行editWord()函数。
3、最后在js标签内,创建editWord()函数,在函数内,通过id获得p元素对象,通过给letterSpacing属性赋值,实现字间距的设置。在浏览器打开test.html文件,点击按钮,查看实现的效果。
你的代码中主要有两个问题:
delNode 应该放到 window.onload 函数的外面来,否则在全局范围内找不到delNode这个函数,你删除的时候就会出问题;
你要删除的元素应该是在id为content这个容器里,而不是body,所以removeChild的对象要换成 content
代码如下:
```js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="txt1"/>
<button id="btn1">确定</button>
<span></span>
<div id="content"></div>
</div>
</body>
</html>
<script>
//删除元素,这个要放到window.onload外面来,否则在全局中找不到delNode这个函数
function delNode(e)
{
console.log("del",e)
var one_parentNode=e.parentNode
var two_parentNode=one_parentNode.parentNode
document.getElementById('content').removeChild(two_parentNode)//这里作了修改
}
window.onload=function(){
var oBtn=document.getElementById('btn1') //按钮
var oTxt=document.getElementById('txt1') //输入框
var oContent=document.getElementById('content') //最大的容器
var oSpan_list=document.getElementsByTagName('span') //span
var count=0
//回车且内容不为空
oTxt.onkeypress=function(event){
if(event.keyCode=="13"&&oTxt.value!="")
{
addNote()
}
}
//点击按钮且内容不为空
oBtn.onclick=function(){
if(oTxt.value != "")
{
addNote()
}
}
//添加元素
function addNote(){
var oP=document.getElementsByClassName('headline')[count]
var aLittle=document.createElement('div') //新建box
var aP=document.createElement('p') //新建小字
var aSpan=document.createElement('span')
var aX=document.createElement('input')
var aDiv=document.createElement('div') //放文本的
aLittle.className="box"
oContent.appendChild(aLittle)
aP.className="headline"
aLittle.appendChild(aP)
aSpan.className="note"
aSpan.innerHTML="note "+parseInt(count+1)
aP.appendChild(aSpan)
aX.className='X'
aX.type="button"
aX.value='X'
aX.setAttribute("onclick","delNode(this)")
aP.appendChild(aX)
aDiv.innerHTML=oTxt.value
aDiv.className="things"
aLittle.appendChild(aDiv)
count++
}
}
</script>
```
、js中设置按钮可点击与不可点击,默认是可点击的
(1)设置按钮不可点击
document.getElementById("bt1").disabled=ture
(2)设置按钮可点击
document.getElementById("bt1").disabled=false
2、jq中设置按钮可点击与不可点击,默认是可点击的
(1)设置按钮不可点击
$("#bt1").attr("disabled",ture)
(1)设置按钮可点击
$("#bt1").attr("disabled",false)
3、标签中设置按钮不可点击
在标签中添加属性disabled="true"。