HTML/JS转换工具
Unicode编码转换
当前位置:首页 > WEB前端 > CSS-HTML > 

HTML标签与属性

来源:IT技术网编辑:雨天发布于:2017-07-10人围观

data-*自定义属性

在HTML5中添加了data-*的方式来自定义属性,所谓data-实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。

?
1
2
3
4
5
<select name="country" id="country">
    <option value="中国" data-id="1">中国</option>
    <option value="美国" data-id="2">美国</option>
    <option value="英国" data-id="3">英国</option>
</select>

可以通过JavaScript来对其进行操作,HTML5中元素都会有一个dataset的属性,这是一个DOMStringMap类型的键值对集合.

?
1
2
var country = document.getElementById('country');
country.dataset.my = choose;

这样就为select添加了一个data-my的自定义属性,需要注意的是获取 data-属性的值时要去掉前面的data-前缀;如果属性名称中还包含连字符(-),需要转成驼峰命名方式,但如果在CSS中使用选择器,我们需要使用连字符格式。

?
1
2
CSS选择器  [data-id-country-name]
js  country.dataset.countryName

用jquery获取选中元素的自定义属性id

?
1
var countryId = $('[name="country"] option:selected').data('id');

设置select标签的选中值,用.val(option中的属性value的值)就可以设置select标签选中的值。$('[name="country"]').val('英国');

织梦二维码生成器

与相关的文章
有时间的话来看看IT界的突发事件
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片