JS獲取元素屬性和自定義屬性

阿新 • • 發佈：2018-12-31

昨天有同事問我，怎麼獲取自定義元素的屬性，我意識到這個確實是個問題，所有總結一下自己的心得。

獲取元素的屬性分為兩種型別：

1-獲取元素常見的屬性（class,id,type,value……）

2-獲取自定義的元素的屬性（data-value,data-mess…….）

獲取元素的屬性，設定元素的屬性：

1-原生JS

       設定屬性 .setAttribute("屬性","值")
       獲取屬性 .getAttribute("屬性")

2-jquery

       設定屬性 .attr("屬性","值")
       獲取屬性 .attr 
("屬性")

下面通過一個例子介紹一下，如何獲取和設定元素的屬性；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

        <title>獲取元素屬性</title>
        <style>
            * {
                margin:0;
                padding:0;
                list-style:none;
            }
        </style>
    </head>

    <body>
        <div id="mayouchen">
            <div style="background:red;height:20px" 
>元素屬性獲取</div>
            <div class="test1">
                <p id="demo">點選按鈕來設定按鈕的 type,id,class 屬性。</p>
                <input value="OK" class="mayouchen">
                <button onclick="mayouchen1()">獲取元素屬性</button>
            </div>
            <div style="background:green;height:20px">自定義屬性獲取</div>
            <div class="test2">
                <div id="tree" data-leaves="47" data-plant-height="2.4m">我是被獲取的元素</div>
                <button onclick="mayouchen2()">獲取自定義元素屬性</button>
            </div>
        </div>
        <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
        <script>
            $(function() {

            });

            function mayouchen1() {
                document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");
                document.getElementsByTagName("INPUT")[0].setAttribute("class", "mayouchen");
                document.getElementsByTagName("INPUT")[0].setAttribute("id", "test1");

                document.getElementsByTagName("INPUT")[0].getAttribute("id");
                document.getElementsByTagName("INPUT")[0].getAttribute("class");

                console.log("id=====" + document.getElementsByTagName("INPUT")[0].getAttribute("id"));
                console.log("class=====" + document.getElementsByTagName("INPUT")[0].getAttribute("class"));
            }

            function mayouchen2() {
                var tree = document.getElementById("tree");
                //getAttribute()取值屬性
                console.log("data-leaves======" + tree.getAttribute("data-leaves"));
                console.log("data-plant-height===============" + tree.getAttribute("data-plant-height"));

                //setAttribute()賦值屬性
                tree.setAttribute("data-come", "49");

                //data-字首屬性可以在JS中通過dataset取值，更加方便
                console.log("通過dataset獲得data-leaves====" + tree.dataset.leaves);
                console.log("通過dataset獲得data-plant-height====" + tree.dataset.plantHeight);

                //注意在這裡連字元的訪問時，屬性要寫成駝峰形式
            }
        </script>
    </body>

</html>

上面有兩個test, test1是測試元素常見屬性，test2是測試元素自定義屬性

JS獲取元素屬性和自定義屬性

昨天有同事問我，怎麼獲取自定義元素的屬性，我意識到這個確實是個問題，所有總結一下自己的心得。獲取元素的屬性分為兩種型別： 1-獲取元素常見的屬性（class,id,type,

jquery attr和data給元素添加自定義屬性

方式 data 情況 logs .cn strong 目前 es2017 tid 博主不才，將自己總結的寫在這裏，如有問題歡迎一起討論； jquery給一個元素添加自定義屬性目前見過兩種方式方式一：attr 方式二：data 這兩種放方式都可以給元素添加自定義屬性如：

jQuery獲取select中選中的option的值和自定義屬性的值

使用jQuery獲取獲取select下拉框中option的值： //通過繫結change事件，當下拉框內容發生變化時事件被啟動 $("#wlms").bind("change",function(

自定義元素屬性，以及用jquery 去獲取當前點選的元素的這個自定義屬性

部分html: <button dataid="1" class="btn btn-primary btn-xs hanblog_edit">修改</button>juqery

js簡單對象List自定義屬性排序

urn cnblogs color bject ray asc obj var pre 簡單對象List自定義屬性排序 <script type="text/javascript"> var objectList = new Array

關於jQuery獲取html標簽自定義屬性值或data值

自定義屬性標簽定義 .data 獲取 div val data 屬性 //獲取屬性值<div id="id1" value="優秀" ></div>jQuery取值:$("#id1").attr("value"); //獲取自定義屬性值&l

Springboot2(2)屬性配置講解和自定義屬性配置

[原始碼地址](https://gitee.com/cowboy2016/springboot2-open) springboot2系列教程在使用spring boot過程中，可以發現專案中只需要極少的配置就能完成相應的功能，這歸功於spring boot中的模組化配置，在

HTML5中的資料集dataset和自定義屬性data-*

在html5中可為所有元素新增一種自定義的屬性，這種屬性的字首以data-開頭，比如：data-name,目的是為元素提供與頁面渲染無關，但與dom元素強相關的屬性。新增完自定義屬性後我們可以通過

Andoid自定義View的OnMeasure詳解和自定義屬性

一，OnMeasure詳解 Android開發中偶爾會用到自定義View，一般情況下，自定義View都需要繼承View類的onMeasure方法，那麼，為什麼要繼承onMeasure()函式呢？什麼情況下要繼承onMeasure()？系統預設的onMeasure()函式行為

深入分析Spring屬性編輯器（預設屬性編輯器和自定義屬性編輯器）

在Spring配置檔案或配置類裡，我們往往通過字面值為Bean各種型別的屬性提供設定值：不管是double型別還是int型別，在配置檔案中都對應字串型別的字面值。BeanWrapper填充Bean屬性時如何將這個字面值轉換為對應的double或int等內部型別呢？我們可以隱約

C# .NET 獲取列舉值的自定義屬性（特性）資訊

一、引言列舉為我看日常開發的可讀性提供的非常好的支援，但是有時我們需要得到列舉值得描述資訊或者是註釋（備註）資訊比如要獲得 TestEmun.aaa 屬性值得備註 AAA，比較不方便得到。 public enum TestEmun { ///

前端中this和自定義屬性

this是一個特殊的存在，this是就是呼叫當前的方法，（函式）的（元素）物件在全域性下就是Window.在事件呼叫匿名函式裡直接呼叫時，this又變回了Window.這時元素呼叫的函式實際上是匿名函式，而匿名函式內部直接呼叫的函式依然是Window在呼叫

Spring Boot 屬性配置&自定義屬性配置

在使用spring boot過程中，可以發現專案中只需要極少的配置就能完成相應的功能，這歸功於spring boot中的模組化配置，在pom.xml中依賴的每個Starter都有預設配置，而這些預設配置足以滿足正常的功能開發。如果需要修改自定義修改預設配置，sprin

Spring Boot 系列（三）屬性配置&自定義屬性配置

在使用spring boot過程中，可以發現專案中只需要極少的配置就能完成相應的功能，這歸功於spring boot中的模組化配置，在pom.xml中依賴的每個Starter都有預設配置，而這些預設配置足以滿足正常的功能開發。如果需要修改自定義修

原生JS獲取含有自定義屬性的元素節點

jQuery有data()方法可以獲取到自定義的元素節點，而原生JS獲取則要用到querySelector以及querySelectorAll這兩個方法。用程式碼寫一下。 <!DOCT

HTML5的自定義屬性data-*詳細介紹和JS操作實例

select 文章 red data scrip style box 實例 width 這篇文章主要介紹JS操作HTML自定義屬性的方法, 以實例形式分析了html中自定義屬性的設置與對應的javascript操作技巧具體如下： HTML代碼如下（其中的d

從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操作元素，自定義屬性

器） user 對比 style 按鈕 ont mp3 url -- 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：ht

總結Jquery中獲取自定義屬性使用.attr()和.data()以及.prop()的區別

p.p1 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px ".PingFang SC" } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC" } p.p3 { margin:

微信小程式自定義屬性設定和獲取（data-）

自定義屬性語法以data-開頭： <block wx:for='{{post_key}}' wx:key="key" wx:for-item='item'> <view catchtap='onPostTap' data-postid="{{item.postId}}

js中通過節點獲取自定義屬性

父標籤，子標籤 TObj = pNode.parent().next() .children(‘div’).children(’.title’); TObj = pNode.parent().parent().children(‘div’).children(’.title’); TOb

JS獲取元素屬性和自定義屬性

獲取元素的屬性分為兩種型別：

1-獲取元素常見的屬性（class,id,type,value……）

2-獲取自定義的元素的屬性（data-value,data-mess…….）

獲取元素的屬性，設定元素的屬性：

相關推薦