Question

我正在尝试创建一个获取和设置数据属性的真实示例。

所以我创建了一个包含data-email属性并设置默认值的简单div。

现在我想要达到的是当我点击按钮时，它会将默认属性更改为我的JavaScript代码的set属性。

目前我还不知道如何在div的标签内显示数据属性值。

这是我的标记：

<div id="my-id" data-email="youremail@email.com">Sam's email is <span> "Show Email Here" </span> </div>

<button type="button" id="btn-id" onclick="click-btn()">Set Attribute Now</button>

这是我的JavaScript：

var email = document.getElementById('my-id');

var emailget = email.getAttribute('data-email');
var button = document.getElementById('btn-id');

function click-btn(){
    emailset = email.setAttribute('data-email', newemail@email.com);
}

这是JSFIDDLE链接：http://jsfiddle.net/jypb2jdg/6/

有什么想法吗？

Answer 1

正如@adeneo建议我们不应该在函数名中使用连字符，因为它可能被解释为减号，所以删除你可以像这样使用：

您需要在setAttribute值中使用quote：

function clickBtn(){
    emailset = email.setAttribute('data-email', 'newemail@email.com');
                                               //^^ here           ^^
}

你需要这样的东西：

function clickBtn(){
        emailset = email.setAttribute('data-email', 
                   email.getAttribute('data-email') || 'newemail@email.com');
    }

Answer 2

首先，您撰写的电子邮件必须在引号内。

<div id="my-id" data-email="youremail@email.com">Sam's email is <span id="my-span-id"> "Show Email Here" </span> </div>

<button type="button" id="btn-id" onclick="click_btn()">Set Attribute Now</button>

JS代码：

function click_btn(){
    var email = document.getElementById('my-id');
    var emailContainer = document.getElementById("my-span-id");
    var emailget = email.getAttribute('data-email');
    emailContainer.innerText = emailget;
    emailset = email.setAttribute('data-email', "newemail@email.com");
}

代码可在以下位置找到： http://jsfiddle.net/jypb2jdg/17/

我想提一点：

在div之前包含JS。因为按钮在声明之前不会识别click_btn（）函数;
不要使用＆＃39; - ＆＃39; JS中函数名称的符号。

您可以编写脚本而不使用span的ID。它需要额外的结构（找到子元素，找出你需要的元素，设置它的内容。

Answer 3

您需要记住，javascript中的函数不能在其名称中包含连字符，因为它被视为数学运算符。 Rest只是简单的DOM操作：

<div id='my-id' data-email="youremail@email.com">Sam's email is <span id="mail"> "Show Email Here" </span> 
</div>
<button type="button" id="btn-id" onclick="clickbtn()">Set Attribute Now</button>

JS：

var em;
window.onload = function(){
  em = document.getElementById("my-id");
  document.getElementById("mail").innerHTML = em.getAttribute("data-email");
};
function clickbtn(){    
  var old_mail = em.getAttribute("data-email");
  em.setAttribute("data-email","newmail");
  document.getElementById("mail").innerHTML = em.getAttribute("data-email");
}

小提琴：http://jsfiddle.net/dndnqygL/4/

注意：您可以使用element.firstChild属性设置innerHTML，而不是为范围指定新ID。

使用按钮setAttribute并在span标记内显示它

3 个答案: