What is the correct way to hide HTML elements on p

2019-04-09 09:39发布

站内问答 / JavaScript
1020 4 5

I have found numerous partial answers to this question, but nothing that seems like a definitive answer. For such an important technique I find this a little strange.

How should I hide elements (using javascript) so that they do not appear briefly when the page loads before the JS has a chance to hide them? I don't want to set them to hidden initially with CSS as if a user doesn't have Javascript, they will see nothing.

To be clear. I'm not asking how to handle displaying content to users who don't have JS. That is an entirely different subject. I just want a reliable way to hide HTML elements before they are displayed.

So my requirements:

  1. HTML elements are not hidden initially using CSS
  2. If JS is available, these elements are hidden so that they are never displayed, not even for an instant. This means hiding them from JS loaded at the end of the body is out).

4条回答
贼婆χ
2楼-- · 2019-04-09 09:43

Use a descendent combinator and make the body a member of a class as soon as possible.

<style>
    /* js only element */
    .js foo { display: none; }
</style>
</head>
<body>
<script> document.body.className += " js"; </script>
查看更多
0人赞 添加讨论(0) 举报
孤傲高冷的网名
3楼-- · 2019-04-09 09:46

Like VKen, I prefer to use moderizr and Paul Irish's structure for the html element (which is what HTML5 Boilerplate uses)

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

Then in the style sheet:

.element-to-hide { display: none; }

.no-js .element-to-hide { display: block; }

Works great, no flash of elements disappearing.

查看更多
0人赞 添加讨论(0) 举报
Juvenile、少年°
4楼-- · 2019-04-09 09:54

you could do a <noscript> tag and overwrite the initial css for those with javascript disabled

查看更多
0人赞 添加讨论(0) 举报
走好不送
5楼-- · 2019-04-09 10:07

A solution is to use javascript to include an optional CSS file in which you hide those divs.

Put this in your HEAD section :

<script>document.write('<link rel="stylesheet" type="text/css" href="hiding.css"/>');</script>

And in hiding.css :

div.mySelector {
   display:none;
}

If you don't have additional css to set, you may also more simply inline the css rule in javascript (still in the HEAD) :

<script>
document.write('<style type="text/css">div.mySelector {display:none; }</style>');
</script>

If Javascript isn't available, the divs won't be hidden. And if it is available, the CSS will be used to hide the div before they're displayed.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)