题目

本文介绍实现网页多语言支持的方法及HTML5中data-*自定义属性的应用技巧,包括属性的读取和设置,同时展示了JavaScript与jQuery操作data-*属性的具体示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、如果网页内容需要支持多语言,你会怎么做?

1-采用统一编码UTF-8方式编码-->应用字符集的选择

2-语言书写习惯&导航结构 

3- 数据库驱动型网站 

4- 搜索引擎&市场推广

 

2、html5新特性data_*自定义属性使用

 

 

  1. 获取自定义属性的值

    如下:

    <div id="content" data-age="18">html5 data-*自定义属性 age</div>

    多了一个”data-*” 属性, 如何获取呢?

    //js

    var content= document.getElementById('content');

    alert(content.dataset.age)

     

    //jquery

    $('#content').data('age');//读

  2.  

      读取的时候是通过dataset对象,使用”.”来获取属性,需要去掉data-前缀,连字符需要转化为驼峰命名

    <div id="content" data-user-list="user_list">data-user_list自定义属性 </div>

    //js

    var content= document.getElementById('content');

    alert(content.dataset.userList)

     

    //jquery

    $('#content').data('userList');//读

  3.  

    通过js方式给data-*设置值

    <div id="content" data-user-list="user_list">data-user_list自定义属性 </div>

    //js

    var content= document.getElementById('content');

    content.dataset.name='我叫tom'

    alert(content.dataset.name)

     

    //jquery

    $('#content').data('name','我叫tom');//写

  4. 4

    getAttribute/setAttribute方法的使用

    var content= document.getElementById('content');        

    content.dataset.birthDate = '19990619';        

    content.setAttribute('age', 25);       

    console.log(content.getAttribute('data-age')); //25       console.log(content.getAttribute('data-birth-date')); //19990519   

 

转载于:https://www.cnblogs.com/resist/p/6286876.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值