生活随笔
收集整理的這篇文章主要介紹了
2020-3-20前端题目
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
題目一：
判斷checked復選框是否有被選中
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
=" utf-8">
<script
>
window
.onload = () => {let odiv
=document
.getElementById("ant");let ck
=document
.getElementById("ck");let obt
=document
.getElementById("bt");obt
.onclick= () => {odiv
.innerHTML
=ck
.checked
;}
}
</script
>
</head
>
<body
><div id
="ant"></div
><input type
="checkbox" id
="ck" checked
/><input type
="button" value
="查看效果" id
="bt"/>
</body
>
</html
>
運行結果：
題目二：
JavaScript 動態添加與刪除div元素
代碼和分析：
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
=" utf-8">
<style type
="text/css">
#box
{width
:500px
;
}
#box div
{width
:200px
;height
:20px
;background
:blue
;margin
-bottom
:5px
;
}
</style
>
<script
>
window
.onload=function(){let oadd
=document
.getElementById("add");let odel
=document
.getElementById("del");let obox
=document
.getElementById("box");oadd
.onclick=function(){var odiv
=document
.createElement("div");obox
.appendChild(odiv
);}odel
.onclick=function(){var divs
=obox
.getElementsByTagName("div");if(divs
.length
>0){obox
.removeChild(divs
[0]);}}
}
</script
>
</head
>
<body
><div id
="box"></div
><input type
="button" id
="add" value
="添加元素"/><input type
="button" id
="del" value
="刪除元素"/>
</body
>
</html
>
相關知識：
document.createElement(tagName)
此方法可以創建一個元素對象。tagName:一個字符串，用來規定創建元素對象的類型名稱。
removeChild可以刪除指定元素的子節點，如果刪除成功，則返回被刪除的子節點對象，否則返回null。
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎
總結
以上是生活随笔為你收集整理的2020-3-20前端题目的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
