使用DataSet API设置数据属性

时间:2015-08-19 12:03:37

标签: javascript html5 custom-data-attribute

以下是使用数据集api从标记获取数据属性的方法。

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:src="@drawable/chrysanthemum" />
  1. 如何设置数据属性?
  2. 我可以创建新的数据属性吗?
  3. 它们会自动附加到元素吗?
  4. 请以示例提供答案。

    感谢。

1 个答案:

答案 0 :(得分:3)

  1. 您可以通过您提到的datasetdata-
  2. 设置Element.setAttribute()属性
  3. 是的,如下面的代码示例所示。您可以使用datasetsetAttribute
  4. 执行此操作
  5. 烨。 CSS可以因此而设计样式。请参阅我的示例中的div[data-price]:after样式。
  6. var div = document.querySelector('div');
    var data = div.dataset;
    
    div.innerHTML += ' was ' + data.color;
    
    data.color = 'yellow';
    
    div.innerHTML += '; now it is ' + data.color + '. <br/>';
    
    data.type = 'Golden Delicious';
    
    div.setAttribute('data-price', '$1.00');
    
    div.innerHTML += 'This div has the following attribute/value pairs:';
    
    for (var i = 0; i < div.attributes.length; i++) {
      var attr = div.attributes[i];
      div.innerHTML += '<br/>' + attr.name + '=' + attr.value;
    }
    
    div.innerHTML += '<br/>This div has the following dataset key/value pairs:';
    
    for (var key in data) {
      div.innerHTML += '<br/>' + key + '=' + data[key];
    }
    div[data-color=red] {
      color: red;
    }
    div[data-color=yellow] {
      color: goldenrod;
    }
    div[data-price]:after {
      content: attr(data-price);
      color: green;
    }
    <div data-color="red">Apple</div>