js中button中文字上下行间距

JavaScript022

js中button中文字上下行间距,第1张

1、首先使用p标签创建一行文字,设置p标签的id为mytxt。

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