JS（原生js和jq方式）獲取元素屬性（自定義屬性），刪除屬性（自定義屬性）

時間 2019-11-12

標籤原生方式獲取元素屬性自定義刪除欄目 JavaScript 简体版

原文原文鏈接

JS（原生js和jq方式）獲取元素屬性（自定義屬性），刪除屬性（自定義屬性）

如下內容：css

1、獲取元素的屬性html

2、設置元素的屬性
jquery

3、刪除元素的屬性ui

1、獲取元素的屬性

1-原生JSspa

獲取屬性 .getAttribute("屬性")

2-jquerycode

獲取屬性 .attr("屬性")

示例代碼cdn

/*jq獲取屬性*/
    var temp = $('.test1').attr('class');
/*js獲取屬性*/
    var temp = document.getElementById('test1').getAttribute('data');

2、設置元素的屬性htm

1-原生JSblog

設置屬性 .setAttribute("屬性","值")

2-jqueryip

設置屬性 .attr("屬性","值")

實例代碼

/*jq設置屬性*/
    var temp2= $('.test2').attr('class','test-spe');
/*js設置屬性*/
    var temp2= document.getElementById('test2').setAttribute('data','self-name-2');

3、刪除元素的屬性

1-原生JS

刪除屬性 .removeAttribute

2-jquery

刪除屬性 .removeAttr

示例代碼

/*jq刪除屬性*/
      var temp = $('.test1').removeAttr('data');
/*js刪除屬性*/
      var temp = document.getElementById('test1').removeAttribute('data');

以上上面代碼實例所有

<!DOCTYPE html>
<html>
     <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>元素屬性</title>
        <style>
            * {
                margin:0;
                padding:0;
                list-style:none;
            }
            a{
                color: #5579ee;
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <div id="mayouchen" style="width: 500px;margin: 50px auto;">
            <a id="test1" class="test1">元素屬性獲取(class爲test1)</a>
            <p><span>屬性名：</span><span class="test1_2"></span></p>
            <br />
            <a id="test2" class="test2">元素屬性設置(修改class爲test2的值爲test-spe)</a>
            <p><span>設置的屬性名：</span><span class="test2_2"></span></p>
            <br />
            <a id="test3" class="test3" data="self-name">元素屬性刪除(刪除data屬性)</a>
            <p><span>刪除屬性名：</span><span class="test3_1"></span></p>
        </div>
        <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
        <script>
            $('.test1').on('click',function(){
                /*jq獲取屬性*/
                var temp = $('.test1').attr('class');
                /*js獲取屬性*/
                var temp = document.getElementById('test1').getAttribute('class');
                
                console.log(temp);
                $('.test1_2').text(temp);
            })
            $('.test2').on('click',function(){
                /*jq設置屬性*/
                var temp2= $('.test2').attr('class','test-spe');
                /*js設置屬性*/
                var temp2= document.getElementById('test2').setAttribute('class','test-spe');
                
                var temp_spe = $('.test-spe').attr('class');
                $('.test2_2').text(temp_spe);
            })
            $('.test3').on('click',function(){
                var tempSpe = $('.test3').attr('data');
                /*jq刪除屬性*/
                var temp = $('.test3').removeAttr('data');
                /*js刪除屬性*/
                var temp = document.getElementById('test3').removeAttribute('data');
                
                console.log(tempSpe);
                $('.test3_1').text(tempSpe);
            })
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。