显示/隐藏& # 39;div # 39;使用JavaScript

小开

你可以简单地操纵div的样式…

document.getElementById('target').style.display = 'none';

小开

最佳答案

如何显示或隐藏一个元素:

为了显示或隐藏一个元素，操作该元素的样式属性。在大多数情况下，你可能只想改变元素的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之间切换，这意味着在显示元素集合时，下面的五月就足够了。

如果你不希望它默认为block，你可以选择指定所需的display作为第二个参数。

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>

小开

使用方式:

<style type="text/css">
.hidden {
display: none;
}
.visible {
display: block;
}
</style>

在JavaScript中使用事件处理程序比在HTML中使用onclick=""属性更好:

<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元素!

小开

我发现这个简单的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>

小开

<script type="text/javascript">
function hide(){
document.getElementById('id').hidden = true;
}
function show(){
document.getElementById('id').hidden = false;
}
</script>

小开

你也可以使用jQuery JavaScript框架:

隐藏Div块

$(".divIDClass").hide();

显示Div块

$(".divIDClass").show();

小开

你可以隐藏/显示Div使用Js函数。下面的示例

<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>

小开

将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
}

小开

对于使用卤素的人，Purescript给出的答案是:

import CSS (display, displayNone)
import Halogen.HTML as HH
import Halogen.HTML.CSS as CSS


render state =
HH.div [ CSS.style $ display displayNone ] [ HH.text "Hi there!" ]

如果你“inspect element”，你会看到如下内容:

<div style="display: none">Hi there!</div>

但正如预期的那样，屏幕上将不会显示任何内容。

小开

只是简单的函数需要实现显示/隐藏'div'使用JavaScript

<a id="morelink" class="link-more" style="font-weight: bold; display: block;" onclick="this.style.display='none'; document.getElementById('states').style.display='block'; return false;">READ MORE</a>




<div id="states" style="display: block; line-height: 1.6em;">
text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
<a class="link-less" style="font-weight: bold;" onclick="document.getElementById('morelink').style.display='inline-block'; document.getElementById('states').style.display='none'; return false;">LESS INFORMATION</a>
</div>

小开

设置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

小开

我发现了这个问题，最近我正在使用Vue.js实现一些ui，所以这可能是一个很好的替代方案。

首先你的代码没有隐藏target当你点击查看配置文件。你正在用div2重写内容target。

let multiple = new Vue({
el: "#multiple",
data: {
items: [{
id: 0,
name: 'View Profile',
desc: 'Show profile',
show: false,
},
{
id: 1,
name: 'View Results',
desc: 'Show results',
show: false,
},
],
selected: '',
shown: false,
},
methods: {
showItem: function(item) {
if (this.selected && this.selected.id === item.id) {
item.show = item.show && this.shown ? false : !item.show;
} else {
item.show = (this.selected.show || !item.show) && this.shown ? true : !this.shown;
}
this.shown = item.show;
this.selected = item;
},
},
});

<div id="multiple">
<button type="button" v-for="item in items" v-on:click="showItem(item)">\{\{item.name}}</button>


<div class="" v-if="shown">: \{\{selected.desc}}</div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>

小开

你可以使用jQuery .toggle ()轻松实现这一点。

$("#btnDisplay").click(function() {
$("#div1").toggle();
$("#div2").toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
First Div
</div>
<div id="div2" style="display: none;">
Second Div
</div>
<button id="btnDisplay">Display</button>

小开

相反，你的两个函数使用toggle函数与以下主体

this[target].parentNode.style.display = 'none'
this[source].parentNode.style.display = 'block'

function toggle(target, source) {
this[target].parentNode.style.display = 'none'
this[source].parentNode.style.display = 'block'
}

<button onClick="toggle('target', 'replace_target')">View Portfolio</button>
<button onClick="toggle('replace_target', 'target')">View Results</button>


<div>
<span id="target">div1</span>
</div>


<div style="display:none">
<span id="replace_target">div2</span>
</div>

小开

一个简单的例子，使用Button向上滚动。它只会在javascript激活时滚动，这是一个监听scroll type的event。

document.getElementById('btn').style.display='none'


window.addEventListener('scroll', (event) => {
console.log(scrollY)
document.getElementById('btn').style.display='inline'
})

a
long<br>
text<br>
comes<br>
long<br>
text<br>
again


<button id=btn class = 'btn btn-primary' onclick='window.scrollTo({top: 0, behavior: "smooth"});'>Scroll to Top</button>

< a href = " https://tik9.github。io" rel="nofollow noreferrer">Live in action here . io" rel="nofollow noreferrer">Live in action here