如何使用javascript获取div的值

IT技术 javascript html
2021-02-13 12:26:46

这是我的 div：

<div id="demo" align="center"  value="1">
    <h3>By Color</h3>
    <input type="radio" name="group1" id="color1" value="#990000"  onClick="changeColor()"/><label for="color1">Red</label>
    <input type="radio" name="group1" id="color2" value="#009900" onClick="changeColor()"/><label for="color2">Green</label>
    <input type="radio" name="group1" id="color3" value="#FFFF00" onClick="changeColor()" /><label for="color3">Yellow</label><br><br><br>
</div>

我想要那个 div 的值属性（值=“1”）。

我正在尝试这样：

function overlay()
{
    var cookieValue = document.getElementById("demo").value;    
    alert(cookieValue);
}

但它显示“未定义”如何使用 javascript 获取值 1 请提出任何解决方案。

6个回答

DIVs 没有value 财产。

从技术上讲，根据 DTD，它们也不应该具有value 属性，但通常.getAttribute()在这种情况下您会想要使用：

function overlay()
{
    var cookieValue = document.getElementById('demo').getAttribute('value');
    alert(cookieValue);
}
@Mahi 谢谢，我已经删除了链接
2021-03-16 12:26:46
对不起，我只想给 + 但不幸的是我点击了向下箭头我想改变但它没有移动
2021-03-19 12:26:46
恐怕这对于某些版本的 IE 来说可能会很麻烦？stackoverflow.com/questions/531508/...
2021-03-21 12:26:46
@JAAulde 你的小提琴坏了
2021-03-27 12:26:46
@DhruvPathak 我不会争论 IE 的奇数版本是否会为此而苦恼——IE 的奇数版本似乎与一切都在苦苦挣扎。但是，您发布的链接与手头的主题无关。该链接指的是 IE将attr正确引用class为className. 如果你是对我投反对票的人，我真的不明白为什么。
2021-04-06 12:26:46

简而言之，'value' 不是 div 的有效属性。所以返回 undefined 是绝对正确的。

您可以做的是使用 HTML5 属性“data-*”之一

<div id="demo" align="center"  data-value="1">

脚本将是：

var val = document.getElementById('demo').getAttribute('data-value');

这应该适用于大多数现代浏览器 只要记住把你的 doctype 设置为<!DOCTYPE html>有效

正如我在评论中所说，<div>元素没有value属性。尽管（非常）糟糕，但可以通过以下方式访问它：

console.log(document.getElementById('demo').getAttribute);

我建议使用 HTML5data-*属性。像这样的东西：

<div id="demo" data-myValue="1">...</div>

在这种情况下，您可以使用以下方法访问它：

element.getAttribute('data-myValue');
//Or using jQuery:
$('#demo').data('myValue');

首先

<div id="demo" align="center"  value="1"></div>

那不是有效的 HTML。阅读自定义数据属性或使用以下内容：

<div id="demo" align="center" data-value="1"></div>

由于“数据值”是一个属性，您必须使用getAttribute 函数来检索其值。

var cookieValue = document.getElementById("demo").getAttribute("data-value");
我相信您很清楚，但为了 OP，我会明确说明这data-value仅对 HTML 5 DOCTYPE 有效。没有它，data-value并且value也同样无效。此外，如果运行自定义 DOCTYPE，则value 可能是有效属性。我承认，后一条评论有点牵强。:)
2021-03-23 12:26:46

你可以试试这个：

var theValue = document.getElementById("demo").getAttribute("value");
其它你可能感兴趣的问题
上一篇为什么不在 window 对象上定义 const 和 let 语句 下一篇数字开头的 Javascript 0