3.属性节点
2018-06-12 本文已影响0人
若愚同学
HTML:
<!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>Insert title here</title>
<script type="text/javascript" src="index.js"></script>
<style type="text/css">
.myclass{
background-color: pink;
}
</style>
</head>
<body>
<!-- <form action="" method="get" name="form1" id="form" eat="吃"></form> -->
<select multiple="multiple" size="5" id="sel">
<option>西施</option>
<option>貂蝉</option>
<option>杨玉环</option>
<option>王昭君</option>
</select>
<button class="myclass" id="btn">按钮</button>
<button id="btn2" style="background-color: green">按钮</button>
<input type="text" id="input" value="张三">
</body>
</html>
JS:
window.onload = function(){
//var ele = document.getElementById("form");
//原始属性
//获取属性值
/* var name1 = ele.name;
console.log(name1);
var name2 = ele.getAttribute("name");
console.log(name2);*/
//设置属性值
/* ele.name = "哈哈哈";
console.log(ele.name);
ele.setAttribute("name","hahah");
console.log(ele.name);*/
//自定义属性
/* console.log(ele.eat);
console.log(ele.getAttribute("eat"));
ele.eat = "喝";
console.log(ele.getAttribute("eat"));
ele.setAttribute("eat","喝");
console.log(ele.getAttribute("eat"));*/
/*
*操作属性名和默认属性值相同的属性. 如:checked,selected
*在Dom操作 checked 或者 selected 对应属性值是true false
*不用true,随便用一些字符也能有选中效果,因为在js中,为fasle的一共有6个常量,前一天的内容
*/
var ele = document.getElementById("sel");
//ele.firstChild.nextSibling.selected = "2";结果也能选中
ele.firstChild.nextSibling.selected = true;
//操作class属性-->属性名为:className
var btn = document.getElementById("btn");
//获取属性名
console.log(btn.className);
//获取btn2中style的background-color
/*
操作style的属性.如:background-color ---> style[“background-color”]
style对象.backgroundColor
*/
var btn2 = document.getElementById("btn2");
console.log(btn2.style["background-color"]);
console.log(btn2.style.backgroundColor);
//只读操作操作readonly属性:readonly--->readOnly
var input = document.getElementById("input");
input.readOnly=true;
};
