将文本封装在元素 javascript 中

Question

我正在尝试构建一个聊天应用程序，所以我遇到了这个小问题：-这是一个带有文本和图像的元素，通常是样式

<div class="msg">
lets try that again shall we <img class="emojione" alt="😆" title=":laughing:" src="https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/1f606.png">
</div>

这是一个带有图像但没有文本的元素，但是这个图像因为它是单独的，所以我想设置它的大小

<div class="msg">
<img class="emojione" alt="😆" title=":laughing:" src="https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/1f606.png">
</div>

像这样

请这是我的第一个问题，所以我在这里有点菜：P

Answer 1

我添加了代码，它使用类名msg检查 DOM 中的所有节点，检查条件（您在问题中指定的那个）并修改唯一的img消息。

 const arr = document.getElementsByClassName('msg'); for (let i = 0; i < arr.length; i++) { if (arr[i].innerText.length === 0 && arr[i].children.length == 1 && arr[i].children[0].classList.contains('emojione')) { arr[i].children[0].classList.add('big-img'); } }

 .big-img{ transform: scale(1.5) }

 <div class="msg"> lets try that again shall we <img class="emojione" alt="😆" title=":laughing:" src="https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/1f606.png"> </div> <div class="msg"> <img class="emojione" alt="😆" title=":laughing:" src="https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/1f606.png"> </div>