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

最新推荐文章于 2024-06-18 07:00:00 发布

调皮的芋头

最新推荐文章于 2024-06-18 07:00:00 发布

阅读量296

点赞数

分类专栏： javascript 文章标签： li ul setAttribute

javascript 专栏收录该内容

140 篇文章

订阅专栏

本文探讨了在HTML中使用li标签设置value值时，IE浏览器可能遇到的问题及解决方案，包括IE浏览器对数值自动转换为整数以及可能出现的显示异常情况。提供了一种绕过此限制的方法，即使用其他属性如'value2'来存储和获取期望的值。

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

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

直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给li标签设置value</title>
</head>
<body>
<li id="myLi"></li>
<script type="text/javascript">
    window.onload = function () {
        console.log('onload');
        var li22 = document.getElementById('myLi');
        li22['setAttribute']('value', ('90000786062'));
        console.log(li22);
        console.log(li22.getAttribute('value'));
    }

</script>
</body>
</html>

在IE 11中的结果:

控制台打印:

原因:

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

解决方法:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给li标签设置value</title>
</head>
<body>
<li id="myLi"></li>
<script type="text/javascript">
    window.onload = function () {
        console.log('onload');
        var li22 = document.getElementById('myLi');
        li22['setAttribute']('value2', ('90000786062'));
        console.log(li22);
        console.log(li22.getAttribute('value2'));
    }

</script>
</body>
</html>

IE11 :