Du Niang searches the native js to implement the show of jquery. You will find that most of the answers are
el.style.display="block"；At the beginning, I thought it was right, and it was released to the product. After testing, I found that the method was far more complex than I expected.
For example, there are two a tags on the interface, and they are on one line. If you use the above statement to display a tag, you will find that a tag is wrapped, which means that the display operation cannot be simple, and it is related to whether the tag is an in line or block level tag.
The complete code should look like this
//Display elements
showEl: function (elId) {
var node = GoingUtils.getElObj(elId);
if (node != null) {
return GoingUtils.showHide([node], true );
}
},
//Hide show corresponding elements
showHide: function (elements, show) {
var elemdisplay = { BODY: "block" };var iframe,iframeDoc=null;
function css_defaultDisplay( nodeName ) {
if ( elemdisplay[ nodeName ] ) {
return elemdisplay[ nodeName ];
}
var id=GoingUtils.getUUid();
var elm=GoingUtils.appendToBody("<" + nodeName + " id='"+id+"'>");
display = GoingUtils._getStyleValue(id,"display");
GoingUtils.removeEl(id);
if ( display === "none" || display === "" ) {
var iframeEl=document.createElement("iframe");
iframeEl.style.frameBorder=0;
iframeEl.style.width=0;
iframeEl.style.height=0;
GoingUtils.appendToBody(iframeEl);
if ( !iframeDoc || !iframe.createElement ) {
iframeDoc = ( iframe.contentWindow || iframe.contentDocument ).document;
iframeDoc.write("<!doctype html><html><body>");
iframeDoc.close();
}
elem = iframeDoc.body.appendChild( iframeDoc.createElement(nodeName) );
display = GoingUtils._getStyleValue( elem, "display" );
document.body.removeChild( iframe );
}
elemdisplay[ nodeName ] = display;
return display;
}
function isHidden( elem, el ) {
elem = el || elem;
return GoingUtils._getStyleValue( elem, "display" ) === "none";
}
var elem, display,
values = [],
index = 0,
length = elements.length;
for (; index < length; index++) {
elem = elements[index];
if (!elem.style) {
continue;
}
if (show) {
//If it is none defined on style, it is directly set to ""
if (!values[index] && elem.style.display === "none") {
elem.style.display = "";
}
//But if it is set in css, it cannot be simply set to
if (elem.style.display === "" && isHidden(elem)) {
values[index] = css_defaultDisplay(elem.nodeName);
}
}
}
for (index = 0; index < length; index++) {
elem = elements[index];
if (!elem.style) {
continue;
}
if (!show || elem.style.display === "none" || elem.style.display === "") {
elem.style.display = show ? values[index] || "" : "none";
}
}
return elements;
},