javascript - How to get data-value in the html div? - Stack Overflow

admin管理员组

文章数量:1355694

I can get all entries' attribute like style display in the div. but I can't get the data-value from the same way. I need find a correct syntax to get the all data-value entries.

  $.ajax({
      url:"{{ url_for('fetch_bar') }}",
      type:"post",
      dataType: "json",
      async: true,
      success:function(response){
        var response = JSON.parse(response);
        var len = Object.keys(response).length;

        var selects = document.querySelectorAll("select[id=select_host]");
        var bars = document.querySelectorAll("[id=ldBar]");
        if (len == 1) {
           ....
        }
        else if (len > 1)
          for( var ind = 0; ind < len; ind++){
            for (var index = 0; index < selects.length ; index++)
              if (selects[index].value == response[ind].hostname)
                // alert(bars[index].style.display)
                alert(bars[index].data-value)
                // alert(bars[index].[data-value])

                  <td>

                        <input id="stage" type="button" class="btn-primary" onclick="readTextFile();"  name="stage" value="{{entry.stage}}" >
                        <div id="ldBar" class="ldBar label-center" data-value="0" data-preset="stripe" data-aspect-ratio="none" style="width:100%;display: block;" ></div>
                  </td>
                  <td>

I can get all entries' attribute like style display in the div. but I can't get the data-value from the same way. I need find a correct syntax to get the all data-value entries.

  $.ajax({
      url:"{{ url_for('fetch_bar') }}",
      type:"post",
      dataType: "json",
      async: true,
      success:function(response){
        var response = JSON.parse(response);
        var len = Object.keys(response).length;

        var selects = document.querySelectorAll("select[id=select_host]");
        var bars = document.querySelectorAll("[id=ldBar]");
        if (len == 1) {
           ....
        }
        else if (len > 1)
          for( var ind = 0; ind < len; ind++){
            for (var index = 0; index < selects.length ; index++)
              if (selects[index].value == response[ind].hostname)
                // alert(bars[index].style.display)
                alert(bars[index].data-value)
                // alert(bars[index].[data-value])

                  <td>

                        <input id="stage" type="button" class="btn-primary" onclick="readTextFile();"  name="stage" value="{{entry.stage}}" >
                        <div id="ldBar" class="ldBar label-center" data-value="0" data-preset="stripe" data-aspect-ratio="none" style="width:100%;display: block;" ></div>
                  </td>
                  <td>

• javascript
• html

Share Improve this question Follow asked Jul 30, 2019 at 6:22 The_flashThe_flash 18411 gold badge11 silver badge1111 bronze badges 1

• 1 Try the following snippet document.getElementById("ldBar").dataset["value"] – Nareen Babu Commented Jul 30, 2019 at 6:24

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

Use .getAttribute("data-value") to get the value

console.log(document.querySelector('#ldBar').getAttribute("data-value"))

 <div id="ldBar" class="ldBar label-center" data-value="0" data-preset="stripe" data-aspect-ratio="none" style="width:100%;display: block;" ></div>

If you want to get data-value of the element with jQuery:

console.log($("div").data("value"));

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-value=10><div>

Vanilla JS:

console.log(document.querySelector('div').getAttribute("data-value"));

<div data-value=10></div>

Dataset:

console.log(document.querySelector('div').dataset.value);

<div data-value=10><div>

If you have event then you can simply use it by:

const { dataset: { value }} = e.target;

or you can directly get it by using JQuery:

$("#your_element_id").data("value")

To get the data attribute from an element using jQuery use this syntax:

$("#your_element_id").data("value")

Just note that if you write it like this in your html: <div id='test' data-testID='1'></div>

In jQuery you will access it like this:

$("#test").data("testid");

As all the data properties are returned as lowercase

You can usedataset, like this:

const ldBar = document.getElementById("ldBar")
console.log(
  ldBar.dataset.value,
  ldBar.dataset.preset,
  ldBar.dataset.aspectRatio // Note the conversion to camelCase
);

<div 
  id="ldBar"
  class="ldBar label-center"
  data-value="0"
  data-preset="stripe"
  data-aspect-ratio="none"
  style="width:100%; display: block;" 
></div>

(See: https://developer.mozilla/en-US/docs/Learn/HTML/Howto/Use_data_attributes)

HTML CODE:

<td>
    <input id="stage" type="button" class="btn-primary" onclick="readTextFile();"  name="stage" value="{{entry.stage}}" >
    <div id="ldBar" class="ldBar label-center" data-value="0" data-preset="stripe" data-aspect-ratio="none" style="width:100%;display: block;" ></div>
</td>

JS CODE:

var abc = $('td').find('#ldBar').attr('data-value');

本文标签： javascriptHow to get datavalue in the html divStack Overflow