Как прописать CSS для изображений если их ширина меньше 200px и они в тексте статьи внутри тега div#content
<!-- Код для изображений если их ширина меньше 200px и они находятся внутри тега div#content -->
document.addEventListener('DOMContentLoaded', function() {
// Находим контейнер #content
const content = document.querySelector('#content');
if (!content) return;
// Находим все <img> внутри #content
const images = content.querySelectorAll('img');
images.forEach(function(img) {
if (img.complete) {
checkAndStyle(img);
} else {
img.addEventListener('load', function() {
checkAndStyle(img);
});
}
});
function checkAndStyle(img) {
// clientWidth = отображаемая ширина на странице
if (img.clientWidth < 200) {
img.classList.add('narrow-image');
}
}
});
И добавить css
body img.narrow-image { width: 100px; height: 120px; float: left; margin: 5px;}