html li标签设置value诡异的问题

简介:

设置li的value为一串数字,结果获取的时候不是原来的值.

直接上代码:

Html代码   收藏代码
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>给li标签设置value</title>  
  6. </head>  
  7. <body>  
  8. <li id="myLi"></li>  
  9. <script type="text/javascript">  
  10.     window.onload = function () {  
  11.         console.log('onload');  
  12.         var li22 = document.getElementById('myLi');  
  13.         li22['setAttribute']('value', ('90000786062'));  
  14.         console.log(li22);  
  15.         console.log(li22.getAttribute('value'));  
  16.     }  
  17.   
  18. </script>  
  19. </body>  
  20. </html>  

 在IE 11中的结果:

 控制台打印:

 原因:

ul 中的li定义的value会自动转换为int.数值,ie 浏览器下大于int最大值,显示int最大值,其他浏览器显示为0.而且无论你定义什么值,都会转int.默认为1,例如value=中文。所以如果你想要实现正确取值,就需要换一个li属性例如自定义属性time.或者改一种实现标签元素,例如div.都可以

解决方法:

不使用value,而使用其他名称

Html代码   收藏代码
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>给li标签设置value</title>  
  6. </head>  
  7. <body>  
  8. <li id="myLi"></li>  
  9. <script type="text/javascript">  
  10.     window.onload = function () {  
  11.         console.log('onload');  
  12.         var li22 = document.getElementById('myLi');  
  13.         li22['setAttribute']('value2', ('90000786062'));  
  14.         console.log(li22);  
  15.         console.log(li22.getAttribute('value2'));  
  16.     }  
  17.   
  18. </script>  
  19. </body>  
  20. </html>  

 IE11 :

 

 

相关文章
|
18天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
14 0
|
19天前
|
前端开发 JavaScript 安全
react如何渲染包含html标签元素的字符串
react如何渲染包含html标签元素的字符串
15 0
|
19天前
|
移动开发 开发框架 Java
html一个案例学会所有常用HTML(H5)标签
html一个案例学会所有常用HTML(H5)标签
23 0
|
23天前
|
前端开发
HTML中的pre标签表示空格或换行
HTML中的pre标签表示空格或换行
|
23天前
vscode中设置HTML模板
vscode中设置HTML模板
|
25天前
|
移动开发 JavaScript 前端开发
如何处理html5新标签的浏览器兼容问题?
如何处理html5新标签的浏览器兼容问题?
9 0
|
27天前
|
XML JavaScript 数据格式
python - bs4提取XML/HTML中某个标签下的属性
python - bs4提取XML/HTML中某个标签下的属性
20 0
|
27天前
|
移动开发 搜索推荐 前端开发
html标签大全
第一章 自结束标签 像<p> </p> <title> </title> <h1> </h1> 这类标签是需要有结束标签的 而 自结束标签(自己结束自己)是不需要结束标签的 如:<img> <input> 还可以写成 <img /> <input />
|
30天前
|
XML 编解码 安全
HTML标签及说明大全(685个)
HTML标签及说明大全(685个)
11 0
|
1月前
|
前端开发 定位技术 容器
HTML_标签的命名/CSS标准化命名大全
HTML_标签的命名/CSS标准化命名大全

相关产品

  • 云迁移中心