Question

如何使用DOM类名来引用预定义变量，该变量与带有JavaScript的className同名？

例如：

<div class="someContent"></div>

//JS
var someContent = "this is a JS variable";

div = document.querySelector(".someContent");

div.innerHTML = div.className;

输出：

<div class="someContent">someContent</div>

但我试图输出：

<div class="someContent">this is a JS variable</div>

使用classname链接到我的变量。有没有办法使用classname来引用变量而不是实际的className？

请不要jQuery。

这是我在http://jsfiddle.net/f6WpJ/

工作的小提琴

Answer 1

您可以在对象中使用对象和存储值：

var data = {someContent : "this is a JS variable"};

div = document.querySelector(".someContent");

div.innerHTML = data[div.className];

Fiddle

Answer 2

你要做的是有效地滥用元素类的语义;要存储数据引用，最好将它们存储为数据属性，例如：

<div class="someContent somethingElse" data-param="someContent"></div>

这样就可以将数据与元素可能具有的任何特定类列表分离。

代码看起来像这样：

var dataMap = {
    someContent: "this is a JS variable"
};

div = document.querySelector(".someContent");

div.innerHTML = dataMap[div.getAttribute('data-param')];

如果浏览器支持dataset，您可以执行以下操作：

div.innerHTML = dataMap[div.dataset.param];

Demo

Answer 3

你可以这样做：

var someContent = "this is a JS variable";

div = document.querySelector(".someContent");

div.innerHTML = window[div.className];

demo :: jsFiddle 但是有更好的方法可以按照 @dfsq

的建议去做

注意 :: window[div.className]的使用假设变量位于全局范围

如何使用classname作为预定义变量？

3 个答案: