2021-01-29

最新推荐文章于 2024-09-22 11:17:00 发布

SYEYEE

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量146

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/SYEYEE/article/details/113369819

版权

本文通过JavaScript实例展示了如何动态修改div样式和创建元素，包括使用getElementsByTagName、addEventListener和DOM操作。重点介绍了div元素颜色变化的点击计数器功能。

摘要由CSDN通过智能技术生成

Java Script练习

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">>
	<title>Document</title>
</head>
<body>
	<div></div>
    <div></div>
<script type="text/javascript">
	/*
	//dom是一种接口，是文档对象模型，可以实现网页的动态效果。
	//创建一个对象，将网页中的div对象获取并赋予该对象中，进行处理。
	//document.getElementtsByTagName(获取的内容)【获取的序列】
	//getElementtsByTagName本身就是一个数组
	var div=document.getElementsByTagName('div')[0];
	div.style.width="80px";
	div.style.height="80px";
	div.style.backgroundColor="black";

	var count=0;
	//onclick是点击监听方法
		div.onclick=function(){
		count++;
		if(count%2==1){
                this.style.backgroundColor="green";
		}else{
			this.style.backgroundColor="red";
		}
	}
	*/

	//创建div标签和p标签
	var div=document.createElement('div');
	var p=document.createElement('p');

	//设置div的class的属性为example
	//设置p的class的属性为slogan
	//行列式显示形式
	div.setAttribute('class','example');
	p.setAttribute('class','slogan');
	
    p.setAttribute('style','color:red;font-size:150px');
	
   
    //创建对象，用于创建文本
    var text=document.createTextNode('孙兴悦');
    //将创建后的文本添加入p标签，p标签添加入div，div添加入body。
    p.appendChild(text);
    div.appendChild(p);

    document.body.appendChild(div);

    //div.innerHTML="";插入div及div的内容
     

</script>


</body>
</html>>