Как я мог записать высоту динамически созданного элемента? ⇐ Javascript

[Anonymous]

Я работаю над приложением, которое позволяет пользователям управлять списком контактов. У меня есть функция для мобильного представления, которое создает список элементов, которые отображают контактную информацию. Каждый из этих элементов имеет дополнительные элементы, добавленные к ним, чтобы показать изображение контактов, имя, адрес электронной почты, организацию и роль, с которыми они связаны. Организация и роль контакта отображаются в теге P. Этот p тег назначается переменной с именем ContactLystorganizationRoleAndelement . Я заметил, что иногда при просмотре элементов списка контактов в мобильном настроении эти P -теги увеличивают свою высоту, чтобы вместить длинный текст, и это заставляет их отображать часть текста на новой линии, и это не выглядит хорошо. Я подумал, что в функции, которую я использую, я мог обнаружить всякий раз, когда P -тег превышал 18px по высоте и регулировал второй текст, чтобы он был Ellipsis, чтобы указать пользователю, что текст слишком длинный, чтобы соответствовать, а также поддерживать постоянный внешний вид для этих контактных элементов. Я могу войти в систему тега P через переменную с названием ContactListorgizationAndRoleelement в мою консоли, и когда я наведу за регистрационными элементами в консоли, появляется подсказка инструментов, давая измерение элементов. Однако, когда я пытаюсь зарегистрировать высоту этих P -тегов в консоли, он либо дает мне пустую строку, либо значение 0. Я нашел это странным, потому что мне удалось войти в систему дополнительной информации о стиле о тегах P через контактную литературу и свойства. Тогда я подумал, что я также должен иметь возможность войти в систему eight из свойства переменной , но свойство Height из Style возвращает пустую строку. Я также пытался использовать свойства clientHeight и offsetheight из переменной, но они возвращают значение 0. Как я могу войти в систему

Код: Выделить всё

async function renderMobileContactsListContent() {
const userId = sessionStorage.getItem("user");
const user = await getUser(userId);
const userContacts = await getUserContacts(userId)

const contactsListUserImage = document.querySelector("#contacts-user-image");
if (user.user_image !== null && user.user_image !== './images/user-5-svgrepo-com.svg') {
contactsListUserImage.setAttribute("src", user.user_image);
contactsListUserImage.style.borderRadius = "50%";
}

const contactsUserHeaderNameContainer = document.querySelector("#contacts-user-header-name-container");
// contactsUserHeaderNameContainer.style.margin = "0px 0px 0px 10px"
const contactsHeaderUserNameElement = document.querySelector("#mobile-contact-header-user-name");
contactsHeaderUserNameElement.style.margin = "0px";
const contactsHeaderUserEmailAddressElement = document.querySelector("#contact-header-user-email")
// contactsHeaderUserEmailAddressElement.style.margin = "0px 0px 16px 0px";

const contactsUserNameElement = document.querySelector("#contacts-user-name");
contactsUserNameElement.style.margin = "0px";
const contactsUserEmailAddressElement = document.querySelector("#contacts-user-email");
contactsUserEmailAddressElement.style.margin = "0px";
contactsUserNameElement.innerHTML = `${user.firstname}'s Contacts`;
// contactsUserNameElement.style.fontSize = "xx-large"
contactsUserNameElement.style.fontFamily = "Arial"
// contactsUserEmailAddressElement.innerHTML = `${user.emailaddress}`

contactsHeaderUserNameElement.innerHTML = `${user.firstname} ${user.lastname}`;
contactsHeaderUserEmailAddressElement.innerHTML = user.emailaddress;

console.log(userContacts)

userContacts.sort(function(a, b) {
if (a.firstname < b.firstname) {
return -1;
}
if (a.firstname < b.firstname) {
return 1;
}

var aFirstChar = a.firstname.charAt(0);
var bFirstChar = b.firstname.charAt(0);
if (aFirstChar > bFirstChar) {
return 1;
} else if (aFirstChar < bFirstChar) {
return -1;
} else {
var aLastChar = a.lastname.charAt(0);
var bLastChar = b.lastname.charAt(0);
if (aLastChar === "") {
aLastChar = "z"
}
if (bLastChar === "") {
bLastChar = "z"
}
if (aLastChar > bLastChar) {
return 1;
} else if (aLastChar <  bLastChar) {
return -1;
} else {
return 0;
}
}
});

const contactsListContainer = document.createElement("div");
const contactsHeaderContainer = document.createElement("div");
contactsHeaderContainer.style.display = "flex";
// contactsHeaderContainer.style.justifyContent = "space-between"
contactsHeaderContainer.style.alignItems = "center"
// contactsHeaderContainer.style.width = "25%";
contactsHeaderContainer.style.backgroundColor = "ghostwhite"
// contactsHeaderContainer.style.marginBottom = "5px"
contactsHeaderContainer.style.padding = "5px"
const myContactsHeaderElement = document.createElement("h2");
myContactsHeaderElement.innerHTML = "My Contacts"
myContactsHeaderElement.style.width = "140px"
myContactsHeaderElement.style.margin = "0"
myContactsHeaderElement.style.marginLeft = "5px"
// myContactsHeaderElement.style.marginRight = "10px"
const numberOfContactsElement = document.createElement("h2");
numberOfContactsElement.innerHTML = userContacts.length;
numberOfContactsElement.style.display = "inline-flex";
numberOfContactsElement.style.justifyContent = "center";
numberOfContactsElement.style.alignItems = "center";
numberOfContactsElement.style.width = "15px";
numberOfContactsElement.style.height = "15px";
numberOfContactsElement.style.backgroundColor = "navy";
numberOfContactsElement.style.color = "white"
numberOfContactsElement.style.padding = "10px";
numberOfContactsElement.style.borderRadius = "50%";
numberOfContactsElement.style.margin = "0"
contactsListContainer.style.position = "absolute";
contactsListContainer.style.top = "28.2%"
contactsListContainer.style.width = "100%"
const contactsList = document.createElement("ul");
contactsList.style.listStyle = "none";
contactsList.style.padding = "0"
contactsList.style.margin = "0"
// contactsList.style.height = "100%";
// contactsList.style.overflow = "auto"
// contactsList.style.zIndex = "5"
userContacts.forEach(contact =>  {
const contactListItem = document.createElement("div");
contactListItem.style.display = "flex";
contactListItem.style.flexDirection = "row";
contactListItem.style.height = "100px"
contactListItem.style.borderTop = "1px solid gray";
contactListItem.style.borderBottom = "1px solid gray";
contactListItem.style.backgroundColor = "aliceblue"
contactListItem.style.marginTop = "1px";
contactListItem.style.marginBottom = "1px";
contactListItem.setAttribute("contactId", contact.contact_id)

contactListItem.addEventListener("mouseover", function() {
contactListItem.style.backgroundColor = "lightgrey";
});

contactListItem.addEventListener("mouseout", function() {
contactListItem.style.backgroundColor = "aliceblue";
});

contactListItem.addEventListener("click", function(event) {

// contactListItem.style.backgroundColor = "green";

function saveDataToURL(url, data) {
const urlObject = new URL(url);
const params = new URLSearchParams(urlObject.search);

for (const key in data) {
if (data.hasOwnProperty(key)) {
params.set(key, data[key]);
}
}
urlObject.search = params.toString();
return urlObject.toString();
}

const myURL = `${rootUrl}/contact_${contact.contact_id}`;
const myData = {
name: `${contact.firstname} ${contact.lastname}`,
// age: 30,
// city: "New York"
};

const newURL = saveDataToURL(myURL, myData);
console.log(newURL);
// Expected output: "https://example.com/page?name=John+Doe&age=30&city=New+York"
window.location.href = newURL
})

const contactListItemImageContainer = document.createElement("div");
contactListItemImageContainer.style.display = "flex";
contactListItemImageContainer.style.alignItems = "center";
// contactListItemImageContainer.style.width = "10%"
contactListItemImageContainer.style.padding = "10px"
const contactListItemImage = document.createElement("img");
contactListItemImage.style.width = "90px";
contactListItemImage.style.height = "100%";
contactListItemImage.style.border = "0.5px solid grey";
contactListItemImage.style.borderRadius = "50%"
contactListItemImage.style.backgroundColor = "gainsboro";
contactListItemImage.style.objectFit = "cover";

if (contact.contact_image !== null && contact.contact_image !== "./images/user-2-svgrepo-com.svg") {
contactListItemImage.setAttribute("src", contact.contact_image);
} else {
contactListItemImage.setAttribute("src", "./images/user-2-svgrepo-com.svg");
}

// contactListItem.innerHTML = `${contact.firstname} ${contact.lastname}`;
const contactListNameContainer = document.createElement("div");
contactListNameContainer.style.position = "relative";
contactListNameContainer.style.display = "flex";
contactListNameContainer.style.flexDirection = "column"
contactListNameContainer.style.justifyContent = "center";
contactListNameContainer.style.alignItems = "center";
contactListNameContainer.style.width = "100%"
const contactListNameElement = document.createElement("h3");
contactListNameElement.style.margin = "0";
contactListNameElement.innerHTML = `${contact.firstname} ${contact.lastname}`;
const contactListEmailElement = document.createElement("p");
contactListEmailElement.style.fontStyle = "italic"
contactListEmailElement.style.margin = "0"

console.log(contact)

if (contact.emailaddress !== null &&  contact.emailaddress !== "") {
contactListEmailElement.innerHTML = contact.emailaddress;
} else {
contactListEmailElement.innerHTML = "text";
contactListEmailElement.style.visibility = "hidden";
}

const contactListOrganizationAndRoleElement = document.createElement("p");
contactListOrganizationAndRoleElement.style.fontWeight = "bolder";
contactListOrganizationAndRoleElement.style.margin = "0";

if (contact.organization !== null && contact.organization !== "" && contact.organization_role !== null && contact.organization_role !== "") {
contactListOrganizationAndRoleElement.innerHTML = `${contact.organization} || ${contact.organization_role}`
} else if (contact.organization !== null && contact.organization !== "" || contact.organization_role === null && contact.organization_role === "") {
contactListOrganizationAndRoleElement.innerHTML = `${contact.organization}`
} else if (contact.organization === null && contact.organization === "" || contact.organization_role !== null && contact.organization_role !== "") {
contactListOrganizationAndRoleElement.innerHTML = `${contact.organization_role}`
} else {
contactListOrganizationAndRoleElement.innerHTML = "text"
contactListOrganizationAndRoleElement.style.visibility = "hidden"
}

//This is where my issue is.

//These work...
console.log(contactListOrganizationAndRoleElement)
console.log(contactListOrganizationAndRoleElement.style.fontWeight)
console.log(contactListOrganizationAndRoleElement.style.margin)
//None of these work...
console.log(contactListOrganizationAndRoleElement.style.height)
console.log(contactListOrganizationAndRoleElement.clientHeight)
console.log(contactListOrganizationAndRoleElement.offsetHeight)

const contactListFavoritesStarIconContainer = document.createElement("div");
contactListFavoritesStarIconContainer.style.display = "flex";
contactListFavoritesStarIconContainer.style.justifyContent = "center";
contactListFavoritesStarIconContainer.style.alignItems = "center"
// contactListFavoritesStarIconContainer.style.width = "10%";
contactListFavoritesStarIconContainer.style.padding = "10px"
const contactListFavoriteStarImg = document.createElement("img");
contactListFavoriteStarImg.classList.add("contact-favorite-icon")
contactListFavoriteStarImg.style.width = "60px"

console.log(contact.favorite)

// contactListFavoriteStarImg.addEventListener("click", function(event) {
//     // event.preventDefault()
//     updateContactFavorite()
// }, false)

contactListFavoriteStarImg.setAttribute("src", "./images/star-gold-svgrepo-com.svg");
if (contact.favorite === null || contact.favorite === false) {
contactListFavoriteStarImg.style.visibility = "hidden"
} else {
contactListFavoriteStarImg.style.display = "block"
}

contactListItemImageContainer.appendChild(contactListItemImage);
contactListNameContainer.appendChild(contactListNameElement);
contactListNameContainer.appendChild(contactListEmailElement);
contactListNameContainer.appendChild(contactListOrganizationAndRoleElement)
contactListItem.appendChild(contactListItemImageContainer)
contactListItem.appendChild(contactListNameContainer)
contactListFavoritesStarIconContainer.appendChild(contactListFavoriteStarImg);
contactListItem.appendChild(contactListFavoritesStarIconContainer);
contactsList.appendChild(contactListItem)
});
contactsHeaderContainer.append(myContactsHeaderElement)
contactsHeaderContainer.appendChild(numberOfContactsElement)
contactsListContainer.appendChild(contactsHeaderContainer)
contactsListContainer.appendChild(contactsList)
document.body.appendChild(contactsListContainer)
}

Подробнее здесь: https://stackoverflow.com/questions/796 ... ed-element