用DOM实现js涂层的创建

最新推荐文章于 2021-06-20 00:03:58 发布

持之以恒

最新推荐文章于 2021-06-20 00:03:58 发布

阅读量967

点赞数

分类专栏：学习文章标签： div html Html HTML scroll 浏览器百度

本文链接：https://blog.csdn.net/qq1355541448/article/details/8184290

版权

学习专栏收录该内容

54 篇文章 0 订阅

订阅专栏

用DOM实现js涂层的创建

<html>
<head><title></title>
<script type="text/javascript">
function showDiv(){
//DOM创建一个图层
var new_div=document.createElement('div');//创建一个元素节点为图层div
new_div.style.width='100px';              //设置节点对象的属性width的值
new_div.style.height='100px';             //设置节点对象的属性height的值
new_div.style.backgroundColor='yellow';   //设置节点对象的属性背景颜色
new_div.id='div1';                        //设置一个节点对象的id值
document.body.appendChild(new_div);       //给body中用appendChild加入以上涂层的创建（也就是在body中创建成功了一个图层div）
var text=document.createTextNode("aaa"); //给节点对象中写入文本节点（也就是值）赋给一个变量
new_div.appendChild(text);      //通过appendChild将上局创建的节点对象的值正式写入到图层中
document.write(document.getElementByid('div1').nodeName);//document对象调用getElementById('div1')找到图层，并将其显示出来
}
</script>
</head>
<body>
<input type="button" οnclick="showDiv()" value="click">
</body>