javascript中使用setAttribute给属性赋值和直接赋值对比

直接po图和代码

下面是源代码

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试setAttribute用法</title>
<style type="text/css">
div {
background-color: #71C671;
border-radius:5px;
border:4px solid green;
}
</style>
<script type="text/javascript">
	
	//给文本框赋值
	function setInputNodeValue(){
		var inputNode = document.getElementById("input1");
		inputNode.size = 60;
		//节点.value这种写法，效果是，直接给节点赋值(不会给节点添加value属性)
		inputNode.value = "江西省赣州市于都县";
	}
	
	//给文本框赋值
	function setInput2NodeValue(){
		var input2Node = document.getElementById("input2");
		input2Node.setAttribute("size", "60");
		//节点.setAttribute("value", "")这种写法，效果是，不但给节点赋值，还会给节点添加value属性
		input2Node.setAttribute("value", "我的家乡在江西省赣州市于都县");
	}
</script>
</head>
<body>
<input type="button" onclick="setInputNodeValue()" value="点击我，给文本框赋值">
<input type="text" id="input1">
<br>
<input type="button" onclick="setInput2NodeValue()" value="点击我，给文本框赋值">
<input type="text" id="input2">
</body>
</html>

javascript中使用setAttribute给属性赋值和直接赋值对比

javascript中使用setAttribute给属性赋值和直接赋值对比

相关推荐