JavaScript一些属性的操作

2021/10/29 12:09:26

编程Tag： javascript 属性操作 var div color document 结点 getElementsByTagName

本文主要是介绍JavaScript一些属性的操作，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

创建文本节点

//创建文本结点
var div = document.getElementsByTagName("div")[0];
var textNode = document.createTextNode("<p>好好学习天天向上</p>");
div.appendChild(textNode);//在末尾

创建元素结点

//创建元素结点
var div = document.getElementsByTagName("div")[0];
var elementNode = document.createElement("h1");
elementNode.textContent="好好学习天天向上";
div.appendChild(elementNode);
var elementNode1 = document.createElement("h1");
var elementNode2 = document.createElement("h1");
elementNode1.textContent="insertBefore第一个元素结点";
elementNode2.textContent="appendChild第二个元素结点";
div.insertBefore(elementNode1,document.getElementsByTagName("p")[1]);//在索引1的p段落之前加入
div.appendChild(elementNode2);

删除节点

//删除节点是由父节点调用的，删除指定的子节点
var div = document.getElementsByTagName("div")[0];
div.removeChild(document.getElementsByTagName("p")[0]);

改变css样式

//改变css样式
function changeColor(color){
	//alert(color);
	document.getElementsByTagName("div")[0].style.backgroundColor=color;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<!-- 导入函数库文件funlib -->
	<!-- <script src="js/funlib.js"></script> -->
	<!-- 导入index.js -->
	<style type="text/css">
		div{
			margin: 0 auto;
			height: 500px;
			width: 90%;
			text-align: center;
			background-color: grey;color: white;
		}
	</style>
</head>
<body>
	<center>
			<button type="button" onclick="changeColor('black')">护眼模式</button>
			<button type="button" onclick="changeColor('grey')">正常模式</button>
			<button type="button" onclick="changeColor('blue')">其他模式</button>
		</center>
	<div>
	</div>

</body>
</html>
<script src="js/caozuosx.js"></script>

这篇关于JavaScript一些属性的操作的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JavaScript一些属性的操作

创建文本节点

创建元素结点

删除节点

改变css样式

相关编程文章