JS笔记-操作属性

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

   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 行间可以看到设置的自定义属性

你可能感兴趣的:(JS笔记-操作属性)