JS18-设定获取标签属性值

<style>
    .div1{
        color: red;
    }
</style>
</head>
<body>
<div>我是div</div>

<input type="radio">          <!-- 获取结果是 null  -->
<!-- <input type="radio" checked> -->  <!-- 获取结果是 空字符串  -->
<!-- <input type="radio" checked="checked"> -->  <!-- 获取结果是 checked  -->

<span index="第一个">我是span</span>

<script>
    // 设定标签的属性值
    // JavaScript中,对于标签属性的设定,分成若干中情况
    // 比较复杂没有固定的用法,需要慢慢的理解和记忆
    // 标签对象.setAttribute(属性 , 属性值)

    // 1,标签本身具有属性

    // console.dir(标签对象) 可以看到的
    // 都可以通过标签直接操作,不一定要用 setAttribute()

    // 例如:定义 id属性值, class属性值

    var oDiv = document.querySelector('div');

    console.dir(oDiv);

    // oDiv.className = 'div1';            //可以直接操作
    oDiv.setAttribute('class' , 'div1');   // 使用setAttribute()也可以
    // 区别: 直接操作用      oDiv.className
    //       setAttribute   使用的是class

    // 2,单选和复选框,checked属性
    
    // 使用 getAttribute 和 setAttribute
    // 如果直接使用 getAttribute 来获取标签的属性值
    // 获取的结果是 null 
    // 如果在标签中设定checked属性,获取的是属性的属性值
    // 如果不写属性值,即时有默认选中效果,获取的也是 空字符串
    // 只有设定了内容,获取的结果,才是设定的内容

    // 要想设定属性
    // oRadio.setAttribute('checked' , 'checked');   // 可以
    // oRadio.setAttribute('checked' , true);        // 可以

    // 设定的,获取的,都是字符串形式
    // 除了 true / false,设定的是布尔值

    // 与直接通过标签本身的属性来获取 是不同的
    
    


    var oRadio = document.querySelector('[type="radio"]');
    // console.dir(oRadio);

    // set/get
    // oRadio.setAttribute('checked' , true);
    // console.log(oRadio.getAttribute('checked'));

    // 通过属性操作
    // oRadio.checked = 'checked'; // 可以
    oRadio.checked = true;         // 可以
    // 获取结果,如果使用 oRadio.checked 属性,直接操作,结果都是 布尔值

    console.log(oRadio.checked);   // 获取的是 true / false 布尔值
    

    // 其他一些属性的属性
    // 定义之后,是不会出现在标签本身属性上
    // 但是会出现在标签的内容上
    // 也不能直接来获取
    // 有些低版本浏览器,是可以设定和获取的
    // 例如 name属性
    var oSpan = document.querySelector('span');
    oSpan.setAttribute('name' , 'spanspan')
    oSpan.setAttribute('index' , '第一个') 
    
    console.dir(oSpan);

    console.log(oSpan.name)
    console.log(oSpan.index)


    // 总结
    //   1,标签本身属性上就有的
    //     id,class,checked
    //     推荐使用属性本身操作
    //   2,set和get,理论上可以设定一切属性和属性值
    //     但是实际操作中,不同浏览器,操作方式和结果不同
    //     一般使用 set和get 操作自定义属性和属性值
    //     例如 index , number , res , idNumber.... 
    //   3,实在记不住,可以先用set设定,看看行不行,再用get获取,看看行不行
    //     总之就是先试试,一个不行,再换另一种方法
DcTbnk.
发布了103 篇原创文章 · 获赞 4 · 访问量 2008
私信关注
JS18-设定获取标签属性值

猜你喜欢
