Question

我有一个显示特定div的页面，

<div id="placeholder1" style="height: 150px;"></div>

但是在某些点击中我想动态地将我的div改为这样的东西。

<div id="placeholder2" style="height: 150px;"></div>

怎么做？

Answer 1

我看到的唯一区别是身份证。如果是的话......

document.getElementById('placeholder1').id = 'placeholder2';

Answer 2

如果您使用的是jQuery，可以将click事件绑定到任何元素并进行更改（确保DOM已完成首先加载）：

$(function() { 
  $('#click_me_to_change_id').bind('click', function() {
    $('#placeholder1').attr('id', 'placeholder2');
  });
});

编辑：经过检查，我发现你想隐藏/显示不同的div，试试这个：

$(function() { 
  $('#click_me_to_toggle_visible_div').bind('click', function() {
    $('#placeholder1').css('display', 'none');
    $('#placeholder2').css('display', 'block');
  });
});

Answer 3

Javascript有一个用于检测点击的onclick事件处理程序，而getElementById用于按ID标识元素。如果您想更改ID，请使用：

var div = document.getElementById('placeholder1');
div.onclick = function(){
    div.id = 'placeholder2';
}

更改显示的内容，假设您有html：

<div id="placeholder1" style="height: 150px;"></div>
<div id="placeholder2" style="height: 150px;display:none"></div>

你会用

var div = document.getElementById('placeholder1');
var div2 = document.getElementById('placeholder2');
div.onclick = function(){
    div.style.display = 'none';
    div2.style.display = 'block';
}

如何在javascript中更改现有的div值？

3 个答案: