Удалите дополнение для пустого элемента
Я генерирую страницу для предстоящего портала сайта, и у меня есть элемент HTML с некоторым дополнительным содержанием. Я хотел бы, чтобы элемент не представил, если это пусто, но добавляющий, что некоторое дополнение к нему заставляет его представлять. Как я добавляю дополнение к содержанию, но только если содержание присутствует?
.someElement{padding-top: 5px;}
Рассматриваемый HTML:
<div class="someElement">With padded content</div>
<div class="someElement"><!-- shouldn't render since it has no content --></div>
В основном я хотел бы, чтобы второй элемент, выше, не занял любое место. Я тестирую во всех главных браузерах, с помощью XHTML 1.1 doctype.
6 ответов
Вы можете сделать трюк с Псевдокласс CSS3: empty
.someElement
{
// your standard style
}
.someElement:empty
{
display:none;
}
К сожалению, Internet Explorer не поддерживает эту функцию. Для всех остальных браузеров он отлично подойдет ...
Дайте элементу атрибут id . Затем вы можете использовать Javascript для проверки его свойства innerHTML после загрузки страницы. Если innerHTML имеет длину нуля, то вы можете установить его свойство отображения равным нулю. Эта страница может помочь, если вы не знаете свой javascript.
Это все еще очень плохой способ игры. Если вы знаете, что элемент не должен отображаться до того, как вы подадите страницу, то лучше пропустить его полностью. Если вы не хотите опускать элемент, просто спрячьте его, а затем заставьте его скрыться; style="display: none"
Если необходимо иметь div. someElement в HTML, лучший CSS/HTML способ сделать это - добавить дополнительный div вокруг добавленного контента, который имеет свойство padding
.someElement > div{padding-top:5px;}
<div class="someElement"><div>Content</div></div>
В противном случае, делайте, как говорит Пекка, или посмотрите, как javascript делает это за вас.
.Дайте пустому элементу другой класс (скажем, someHiddenElement), когда вы генерируете содержимое. Затем добавьте someHiddenElement { отображение: none } в вашу таблицу стилей.
В том месте, где вы заполняете опцию div, если в нем нет текста, попробуйте изменить свойство дисплея CSS на ни на какой. Согласно этому источнику (и другим), дисплей: ни один не удаляет элемент полностью из документа. Он не занимает никакого места, несмотря на то, что HTML для него все еще находится в исходном коде.
Я не могу придумать CSS единственный способ сделать это.
Я бы попытался решить, будет ли элемент визуализироваться в то время, когда я знаю, будет ли в нем какое-либо содержание. Это, наверное, самое чистое решение.