JavaScript Style.Display="None" or Jquery .Hide() Is More Efficient

JavaScript style.display=none or jQuery .hide() is more efficient?

Talking about efficiency:

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

---

What jQuery does with its .show() and .hide() methods is, that it remembers the last state of an element. That can come in handy sometimes, but since you asked about efficiency that doesn't matter here.

Difference between jQuery .hide() and .css(display, none)

jQuery('#id').css("display","block")

The display property can have many possible values, among which are block, inline, inline-block, and many more.

The .show() method doesn't set it necessarily to block, but rather resets it to what you defined it (if at all).

In the jQuery source code, you can see how they're setting the display property to "" (an empty string) to check what it was before any jQuery manipulation: little link.

On the other hand, hiding is done via display: none;, so you can consider .hide() and .css("display", "none") equivalent to some point.

It's recommended to use .show() and .hide() anyway to avoid any gotcha's (plus, they're shorter).

Difference between jQuery’s .hide() and setting CSS to display: none

From the jQuery page about .hide():

"The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css('display', 'none'), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline."

So if it's important that you're able to revert to the previous value of display, you'd better use hide() because that way the previous state is remembered. Apart from that there's no difference.

$(function() {    $('.hide').click(function(){        $('.toggle').hide();        setDisplayValue();    });    $('.show').click(function(){        $('.toggle').show();        setDisplayValue();    });});
function setDisplayValue() {    var display = $('.toggle')[0].style.display;    $('.displayvalue').text(display);}

div {    display: table-cell;    border: 1px solid;    padding: 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p>    <button class="hide">Hide</button>    <button class="show">Show</button></p>
<div class="toggle">Lorem Ipsum</div>
<p>    The display value of the div is:    <span class="displayvalue"></span></p>

Set style.display=none to jquery hide()

There's a function on your code editor. Find and Replace
You put the .style.display = "none" on Find and .hide(); to replace. And don't be too lazy on other.

How to set style=display:none; using jQuery's attr method?

Why not just use $('#msform').hide()? Behind the scene jQuery's hide and show just set display: none or display: block.

hide() will not change the style if already hidden.

based on the comment below, you are removing all style with removeAttr("style"), in which case call hide() immediately after that.

e.g.

$("#msform").removeAttr("style").hide();

The reverse of this is of course show() as in

$("#msform").show();

Or, more interestingly, toggle(), which effective flips between hide() and show() based on the current state.

Check, using jQuery, if an element is 'display:none' or block on click

You can use :visible for visible elements and :hidden to find out hidden elements. This hidden elements have display attribute set to none.

hiddenElements = $(':hidden');
visibleElements = $(':visible');

To check particular element.

if($('#yourID:visible').length == 0)
{

}

Elements are considered visible if they consume space in the document.
Visible elements have a width or height that is greater than zero,
Reference

You can also use is() with :visible

if(!$('#yourID').is(':visible'))
{

}

If you want to check value of display then you can use css()

if($('#yourID').css('display') == 'none')
{

}

If you are using display the following values display can have.

display: none

display: inline

display: block

display: list-item

display: inline-block

Check complete list of possible display values here.

To check the display property with JavaScript

var isVisible = document.getElementById("yourID").style.display == "block";
var isHidden = document.getElementById("yourID").style.display == "none"; 

jQuery ,Css display none - block vs. hide- show

Consider the following example.

$(function() {  $('#showMyList, #showMyAcc').hide();  $("#myList").click(function() {    $("#showMyAcc").hide();    $("#showMyList").show();  });  $("#myAcc").click(function() {    $("#showMyList").hide();    $("#showMyAcc").show();  });});

#showMyList,#showMyAcc {  height: 100px;  width: 500px;  text-align: center;  border: 1px solid gray;  background-color: antiquewhite;  position: absolute;  top: 200px;  left: 200px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="myList">Show List</button><button id="myAcc">Show Name</button><div id="showMyList">List</div><div id="showMyAcc">Name</div>

How can I change CSS display none or block property using jQuery?

The correct way to do this is to use show and hide:

$('#id').hide();
$('#id').show();

An alternate way is to use the jQuery css method:

$("#id").css("display", "none");
$("#id").css("display", "block");

---

Related Topics