Jak*_*Ols 171 html javascript onclick
对于我正在做的网站,我想加载一个div,然后隐藏另一个div,然后有两个按钮,使用JavaScript在div之间切换视图.
这是我目前的代码
function replaceContentInContainer(target, source) {
document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
}
function replaceContentInOtherContainer(replace_target, source) {
document.getElementById(replace_target).innerHTML = document.getElementById(source).innerHTML;
}<html>
<button onClick="replaceContentInContainer('target', 'replace_target')">View Portfolio</button>
<button onClick="replaceContentInOtherContainer('replace_target', 'target')">View Results</button>
<div>
<span id="target">div1</span>
</div>
<div style="display:none">
<span id="replace_target">div2</span>
</div>替换div2的第二个函数不起作用,但第一个是.
Jos*_*ier 394
为了显示或隐藏元素,请操作元素的样式属性.在大多数情况下,您可能只想更改元素的display属性:
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
或者,如果你仍然希望元素占用空间(就像你要隐藏表格单元格一样),你可以改为改变元素的visibility属性:
element.style.visibility = 'hidden'; // Hide
element.style.visibility = 'visible'; // Show
如果要隐藏元素集合,只需遍历每个元素并将元素更改display为none:
function hide (elements) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = 'none';
}
}
// Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));
hide(document.querySelectorAll('.target'));
function hide (elements) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = 'none';
}
}<div class="target">This div will be hidden.</div>
<span class="target">This span will be hidden as well.</span>大多数情况下,您可能只是在display: none和之间切换display: block,这意味着在显示元素集合时,以下内容可能就足够了.
display如果您不希望默认为第二个参数,则可以选择将其指定为第二个参数block.
function show (elements, specifiedDisplay) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = specifiedDisplay || 'block';
}
}
// Usage:
var elements = document.querySelectorAll('.target');
show(elements);
show(elements, 'inline-block'); // The second param allows you to specify a display value
var elements = document.querySelectorAll('.target');
show(elements, 'inline-block'); // The second param allows you to specify a display value
show(document.getElementById('hidden-input'));
function show (elements, specifiedDisplay) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = specifiedDisplay || 'block';
}
}<div class="target" style="display: none">This hidden div should have a display of 'inline-block' when it is shown.</div>
<span>Inline span..</span>
<input id="hidden-input" />或者,用于显示元素的更好方法是仅移除内联display样式以便将其恢复到其初始状态.然后检查display元素的计算样式,以确定它是否被级联规则隐藏.如果是,则显示元素.
function show (elements, specifiedDisplay) {
var computedDisplay, element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
// Remove the element's inline display styling
element.style.display = '';
computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');
if (computedDisplay === 'none') {
element.style.display = specifiedDisplay || 'block';
}
}
}
show(document.querySelectorAll('.target'));
function show (elements, specifiedDisplay) {
var computedDisplay, element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
// Remove the element's inline display styling
element.style.display = '';
computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');
if (computedDisplay === 'none') {
element.style.display = specifiedDisplay || 'block';
}
}
}<span class="target" style="display: none">Should revert back to being inline.</span>
<span class="target" style="display: none">Inline as well.</span>
<div class="target" style="display: none">Should revert back to being block level.</div>
<span class="target" style="display: none">Should revert back to being inline.</span>(如果你想更进一步,你甚至可以模仿jQuery做什么,并通过将元素附加到空白iframe(没有冲突的样式表)来确定元素的默认浏览器样式,然后检索计算的样式.这样做,你将知道display元素的真正初始属性值,您不必硬编码值以获得所需的结果.)
同样,如果要切换display元素或元素集合,可以简单地遍历每个元素,并通过检查display属性的计算值来确定它是否可见.如果它可见,则设置display为none,否则删除内联display样式,如果它仍然隐藏,则将其设置display为指定值或硬编码默认值block.
function toggle (elements, specifiedDisplay) {
var element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
if (isElementHidden(element)) {
element.style.display = '';
// If the element is still hidden after removing the inline display
if (isElementHidden(element)) {
element.style.display = specifiedDisplay || 'block';
}
} else {
element.style.display = 'none';
}
}
function isElementHidden (element) {
return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
}
}
// Usage:
document.getElementById('toggle-button').addEventListener('click', function () {
toggle(document.querySelectorAll('.target'));
});
document.getElementById('toggle-button').addEventListener('click', function () {
toggle(document.querySelectorAll('.target'));
});
function toggle (elements, specifiedDisplay) {
var element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
if (isElementHidden(element)) {
element.style.display = '';
// If the element is still hidden after removing the inline display
if (isElementHidden(element)) {
element.style.display = specifiedDisplay || 'block';
}
} else {
element.style.display = 'none';
}
}
function isElementHidden (element) {
return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
}
}.target { display: none; }<button id="toggle-button">Toggle display</button>
<span class="target">Toggle the span.</span>
<div class="target">Toggle the div.</div>小智 89
您还可以使用jQuery JavaScript框架:
隐藏Div Block
$(".divIDClass").hide();
显示Div Block
$(".divIDClass").show();
Leo*_*Leo 43
你可以简单地操纵有问题的div的风格......
document.getElementById('target').style.display = 'none';
小智 18
您可以使用Js功能隐藏/显示Div.以下样本
<script>
function showDivAttid(){
if(Your Condition) {
document.getElementById("attid").style.display = 'inline';
}
else
{
document.getElementById("attid").style.display = 'none';
}
}
</script>
HTML -
<div id="attid" style="display:none;">Show/Hide this text</div>
Ifc*_*0o1 14
使用风格:
<style type="text/css">
.hidden {
display: none;
{
.visible {
display: block;
}
</style>
在JavaScript中使用事件处理程序比onclick=""HTML中的属性更好:
<button id="RenderPortfolio_Btn">View Portfolio</button>
<button id="RenderResults_Btn">View Results</button>
<div class="visible" id="portfolio">
<span>div1</span>
</div>
<div class"hidden" id="results">
<span>div2</span>
</div>
JavaScript的:
<script type="text/javascript">
var portfolioDiv = document.getElementById('portfolio');
var resultsDiv = document.getElementById('results');
var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
var resultsBtn = document.getElementById('RenderResults_Btn');
portfolioBtn.onclick = function() {
resultsDiv.setAttribute('class', 'hidden');
portfolioDiv.setAttribute('class', 'visible');
};
resultsBtn.onclick = function() {
portfolioDiv.setAttribute('class', 'hidden');
resultsDiv.setAttribute('class', 'visible');
};
</script>
jQuery可以帮助您轻松操作DOM元素!
小智 12
我发现这个简单的JavaScript代码非常方便!
#<script type="text/javascript">
function toggle_visibility(id)
{
var e = document.getElementById(id);
if ( e.style.display == 'block' )
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
只需简单设置ID的样式属性即可：
显示隐藏的div
<div id="xyz" style="display:none">
...............
</div>
//In JavaScript
document.getElementById('xyz').style.display ='block'; // to display
隐藏显示的div
<div id="xyz">
...............
</div>
//In JavaScript
document.getElementById('xyz').style.display ='none'; // to hide
小智 5
将您的 HTML 设置为
<div id="body" hidden="">
<h1>Numbers</h1>
</div>
<div id="body1" hidden="hidden">
Body 1
</div>
现在将javascript设置为
function changeDiv()
{
document.getElementById('body').hidden = "hidden"; // hide body div tag
document.getElementById('body1').hidden = ""; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked";
// display text if JavaScript worked
}