每日思考（2019/12/31）

题目概览

• 对属性data-的理解
• 对CSS预处理器的理解
• 如何快速让一个数组乱序

题目解答

对属性data-的理解

• 定义和用法：data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。用户代理会完全忽略前缀为 "data-" 的自定义属性。data-* 属性包括两部分：

  • 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
  • 属性值可以是任意字符串

• 之前的做法：在标签里面加上我们自己设置的一些属性，然后获取里面的值是使用getAttribute来获取自定义属性里面的值

  在标签里设置自定义属性
  

• 使用自定义属性：只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放

  在标签里设置H5新增的自定义属性

  //使用getAttribute来获取
  var myDiv = document.getElementById("myDiv");
  var theValue = myDiv.getAttribute("user-defined-attribute");
  //使用Html5自定义属性对象Dataset来获取
  var myDiv = document.getElementById("myDiv");
  var theValue = myDiv.dataset.otherAttribute;

• 处理多个自定义元素：dataset并不是典型意义上的JavaScript对象，而是个DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量，

  在标签里设置多个自定义属性
  

  //使用循环遍历
  var myDiv = document.getElementById("myDiv");
  var attrs = myDiv.attributes,
  var expense = {}, i, j;  
  for (i = 0, j = attrs.length; i < j; i++) {
    if(attrs[i].name.substring(0, 5) == 'data-') {
      expense[attrs[i].name.substring(5)] = attrs[i].value;
    }
  //使用dataset属性
  var expense = document.getElementById('myDiv').dataset;
  //让所有的自定义的属性值塞到一个数组中
  var chartInput = []; 
  for (var item in expense) {
    chartInput.push(expense[item]);
  }
  //删掉一个data属性
  delete myDiv.dataset.attribute;
  //增加一个data属性
  myDiv.dataset.attribute4 = 'value4';

• data属性还可以应用在CSS中，前提是你的浏览器支持after伪类，以及content的attr属性（低版本的IE不支持）

  data属性应用于CSS中