您的位置：首页 > Web前端 > JavaScript

JS笔记-操作属性

2015-12-07 23:36 633 查看

　　操作属性的方法分为两大类：

　　1. . eg:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{width: 100px;height: 100px;}
</style>
</head>
<script>
window.onload=function (){
var oDiv=document.getElementById('div');
oDiv.style.background='orange';
};
</script>
<body>
<div id="div"></div>
</body>
</html>

　　　　 [ ]　eg:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{width: 100px;height: 100px;}
</style>
</head>
<script>
window.onload=function (){
var oDiv=document.getElementById('div');
oDiv.style['background']='orange';
var wd='width';
oDiv.style[wd]='300px';
};
</script>
<body>
<div id="div"></div>
</body>
</html>

　　　　共同点:能用'.'的地方一定可以用[]代替。

　　　　不同点：[]可写变量，'.'不可以。

　　2.　getAtrribute('属性名')---获取属性

　　　　eg:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
window.onload=function (){
var oBtn=document.getElementById('btn');

alert(oBtn.getAttribute('index'));

};
</script>
</head>

<body>
<input type="button" value="agos" index="1" id="btn" />
</body>
</html>

　　　　setAtrribute('属性名','属性值')---设置属性

　　　　eg:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
window.onload=function (){
var oBtn=document.getElementById('btn');

oBtn.setAttribute('index', '2');

};
</script>
</head>

<body>
<input type="button" value="agos" index="1" id="btn" />
</body>
</html>

1,2的区别：

　　1.
　　　　. [] 不能获取行间的自定义属性
　　　　getAtrribute 可以获取行间的自定义属性

　　2.
　　　　. [] 不改变属性值的类型获取到的属性值是什么类型就是什么类型
　　　　setAtrribute 改变属性值的类型都为string

　　3.
　　　　. [] 行间看不到设置的自定义属性
　　　　setAtrribute 行间可以看到设置的自定义属性

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航