Teilen Sie Hinweise zur Verwendung von display:none in CSS

Der display:none-Stil wird häufig beim Codieren des Frontends von Webseiten verwendet. Wir stellen fest, dass es mehrere Funktionen gibt, auf die geachtet werden muss

1 :keine für Elemente in der Stildatei oder im Seitendateicode Nach dem Ausblenden, nach dem Laden der Seite, ohne den Stil über js festzulegen, um das Element anzuzeigen, können mithilfe von js-Code einige Attribute des Elements, wie z. B. offSetTop, nicht korrekt abgerufen werden , offSetLeft usw. und der zurückgegebene Wert ist 0. Über js Diese Werte können korrekt abgerufen werden, nachdem style.display so eingestellt wurde, dass das Element angezeigt wird.

2. Mit display:none ausgeblendete Elemente werden von Suchseiten wie Baidu nicht abgerufen, was sich auf die SEO der Website auswirkt. In einigen Fällen kann left:-100000px verwendet werden, um den gleichen Effekt zu erzielen .

3. Wenn Sie den display:none-Stil eines Elements über eine Stildatei oder festlegen, führt die Einstellung von style.display="" mit js nicht dazu, dass das Element angezeigt wird. Sie können stattdessen einen Block- oder Inline-Äquivalentwert verwenden. Bei Einstellungen direkt am Element über style="display:none" tritt dieses Problem nicht auf

4. In einigen Fällen kann style.visibility anstelle von style.display verwendet werden, es sollte jedoch beachtet werden, dass style. Sichtbarkeit Beim Ausblenden eines Elements bleibt der vom Element auf der Seite eingenommene Platz erhalten, während style.display das Element ausblendet und den Platz, den es auf der Seite einnimmt, freigibt.

Das obige ist der detaillierte Inhalt vonTeilen Sie Hinweise zur Verwendung von display:none in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!