<div class="wrapper wrapper-content animated fadeInRight ibox-content"> <form class="form-horizontal m" id="form-tree-add"> <div class="form-group"> <label class="col-sm-3 control-label">集装箱:</label> <input type="hidden" id="code" th:value="${boxList[0].code}"> <input type="hidden" id="color" th:value="${boxList[0].color}"> <input type="hidden" id="type" th:value="${boxList[0].type}"> <input type="hidden" id="title" th:value="${boxList[0].title}"> <div class="col-sm-8"> <select name="containerId" id ="containerId" class="form-control m-b" required οnchange="selectType()"> <option th:each="box : ${boxList}" th:value="${box.id}" th:data-code="${box.code}" th:data-color="${box.color}" th:data-type="${box.type}" th:data-title="${box.title}">[[${box.code}]] 颜色:[[${box.color}]] [[${box.type}]] [[${box.title}]]</option> </select> </div> </div> </form> </div> <th:block th:include="include :: footer" /> <script type="text/javascript"> function selectType() { $("#code").val(($("#containerId").find("option:selected").attr("data-code"))); $("#color").val(($("#containerId").find("option:selected").attr("data-color"))); $("#type").val(($("#containerId").find("option:selected").attr("data-type"))); $("#title").val(($("#containerId").find("option:selected").attr("data-title"))); } </script>
以前我们需要自定义属性的时候一般是这样做的,在标签里面加上我们自己设置的一些属性:
<div id="myDiv" user-defined-attribute="value">在标签里设置自定义属性</div>
然后获取里面的值是使用 getAttribute来获取自定义属性里面的值:
var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");
现在 H5为我们提供了一个 data属性——“ data-”前缀, 可以让所有的 HTML元素支持自定义属性,只要 在标签里面 以” data- ”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。
<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>
这个data属性还可以应用在CSS中,前提是 你的浏览器支持after伪类,以及content的attr属性(低版本的IE不支持):
<div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>
#myDiv{
position: ralative;
}
#myDiv:hover:after{
position: absolute;
top: 0px;
left: 0px;
content: attr(data-attribute);
color: red;
}
如何获取data属性的值?
<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>
一、使用getAttribute来获取
var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");
二、使用Html5 自定义属性对象Dataset来获取
var myDiv = document.getElementById("myDiv");
var theValue = myDiv.dataset.attribute;
注意: 带连字符连接的名称在使用的时候需要命名驼峰化,即大小写组合书写,这与应用元素的style对象类似, dom.style.borderColor 。例如data属性为 data-other-attribute ,则我们要获取相应的值可以使用:myDiv.dataset.otherAttribute
如果Html元素定义了多个自定义属性,如何获取?
<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在标签里设置多个自定义属性</div>
一、使用循环遍历
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;
注: dataset 并不是典型意义上的JavaScript对象,而是个 DOMStringMap对象 , DOMStringMap 是HTML5一种新的含有多个名-值对的交互变量
1、让所有的自定义的属性值塞到一个数组中
var chartInput = [];
for (var item in expense) {
chartInput.push(expense[item]);
}
2、 删掉一个 data属性
delete myDiv.dataset.attribute;
3、增加一个data属性
myDiv.dataset.attribute4 = 'value4';
dataset的兼容性处理
如果浏览器不支持dataset,有必要做一下兼容处理:
if(myDiv.dataset) {
myDiv.dataset.attribute = "valueXX"; // 设置自定义属性
var theValue = myDiv.dataset.attribute; // 获取自定义属性
} else {
myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性
var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性
}
结语:
使用dataset操作data 要比使用getAttribute速度稍微慢些,虽然使用dataset不能提高代码的性能,但是对于简洁代码,提高代码的可读性和可维护性是很有帮助的。
————————————————
版权声明:本文为CSDN博主「不怕麻烦的鹿丸」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_31851435/article/details/53100691