我想使用javascript更改html div的值

Question

是否可以通过JavaScript函数更改HTML的值？

这是一个例子：

div class="fb-page" data-href="https://www.facebook.com/ConnectCommunications?fref=ts"
  data-width="450" data-hide-cover="false" data-show-facepile="true" data-small-header="false"
  data-show-posts="true"></div

现在，我想通过JavaScript onclick -event将data-show-facepile从true更改为false 。

提前致谢！

Answer 1

在浏览器中使用干净的JavaScript：

document.getElementByClassName('fb-page').setAttribute('data-show-facepile', false) ，有关此的更多信息，请参见此处 。 给元素一个id ，然后使用document.getElementById()代替是很聪明的。

现在，如果您有按钮<button id="clickme"> Click me! </button> <button id="clickme"> Click me! </button>您可以添加一个处理程序：

document.getElementById('clickme').addEventListener('click', function(){
    document.getElementByClassName('fb-page')[0].setAttribute('data-show-facepile', false)
}); 

请注意，如果fb-page -class中有多个元素，则要更改的元素可能不是返回列表的第一个元素。

---

使用jQuery： $('.fb-page').attr('data-show-facepile', false) 。 文件 。 如果为元素提供一个ID，则可以使用$('#id') 。

因此，如果您有一个按钮： <button id="fb-show-button">Click me! </button> <button id="fb-show-button">Click me! </button>您添加了一个处理程序：

$('#fb-show-button').click(function(){
    $('.fb-page')[0].attr('data-show-facepile', false)
})

上面的注释也会影响此示例。

---

为什么要提及使用id而不是类？ 因为当您要处理一个特定元素时，ID将唯一地标识它，因为只有一个元素可以具有特定ID。 多个元素可以具有fb-page类。 这就是为什么获取类元素的方法返回数组的原因。

Answer 2

假设您要单击div，如下所示：

 $('.fb-page').on('click', function(){
     $(this).data('show-facepile', false);
 });

Answer 3

很简单：

1）给你的Div一个ID
2）

function YourEvent() {
   $('IdOfYourDiv').prop('data-show-facepile', true)
 }

Answer 4

使用jquery.data（）

<button>Go</button>
<div class="fb-page" data-href="https://www.facebook.com/ConnectCommunications?fref=ts" data-width="450" data-hide-cover="false" data-show-facepile="true" data-small-header="false" data-show-posts="true">Test</div>

jQuery的：

alert(jQuery('.fb-page').data('show-facepile'));
jQuery('button').on('click', function(){
    jQuery('div').data('show-facepile', false);
    alert(jQuery('.fb-page').data('show-facepile'));
});

http://jsfiddle.net/2taxxnwn/