Journalist 12 Posted January 7, 2019 Report Share Posted January 7, 2019 Привет всем! Разбираюсь с одним скрптом, который делает фон под средний цвет картинки: <html> <body> <div class="image-container"> <img src="tomato.jpg" /> <div> Philip Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> <div class="image-container"> <img src="blue.jpg" /> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> <script src="https://unpkg.com/fast-average-color/dist/index.min.js"></script> <script> window.addEventListener('load', function() { var fac = new FastAverageColor(), container = document.querySelector('.image-container'), color = fac.getColor(container.querySelector('img')); container.style.backgroundColor = color.rgba; container.style.color = color.isDark ? '#fff' : '#000'; console.log(color); // { // error: null, // rgb: 'rgb(255, 0, 0)', // rgba: 'rgba(255, 0, 0, 1)', // hex: '#ff0000', // hexa: '#ff0000ff', // value: [255, 0, 0, 255], // isDark: true, // isLight: false // } }, false); </script> </body> </html> Всё работает, но как вставляю второй контейнер с картинкой, цвет ему не задаёт, как мне подправит код? Quote Link to post Share on other sites
gefard 89 Posted January 7, 2019 Report Share Posted January 7, 2019 <script> window.addEventListener('load', function() { var fac = new FastAverageColor(); containers = document.querySelector('.image-container'); for (var i = 0; i < containers.length; i++) { container = containers[i]; color = fac.getColor(container.querySelector('img')); container.style.backgroundColor = color.rgba; container.style.color = color.isDark ? '#fff' : '#000'; console.log(color); // { // error: null, // rgb: 'rgb(255, 0, 0)', // rgba: 'rgba(255, 0, 0, 1)', // hex: '#ff0000', // hexa: '#ff0000ff', // value: [255, 0, 0, 255], // isDark: true, // isLight: false // } } }, false); </script> Quote Link to post Share on other sites
Journalist 12 Posted January 7, 2019 Author Report Share Posted January 7, 2019 Спасибо! Но с этим вариантом вообще ничего не работает 23 часа назад, gefard сказал: <script> window.addEventListener('load', function() { var fac = new FastAverageColor(); containers = document.querySelector('.image-container'); for (var i = 0; i < containers.length; i++) { container = containers[i]; color = fac.getColor(container.querySelector('img')); container.style.backgroundColor = color.rgba; container.style.color = color.isDark ? '#fff' : '#000'; console.log(color); // { // error: null, // rgb: 'rgb(255, 0, 0)', // rgba: 'rgba(255, 0, 0, 1)', // hex: '#ff0000', // hexa: '#ff0000ff', // value: [255, 0, 0, 255], // isDark: true, // isLight: false // } } }, false); </script> Quote Link to post Share on other sites
gefard 89 Posted January 7, 2019 Report Share Posted January 7, 2019 сорян, замени containers = document.querySelector('.image-container'); на containers = document.querySelectorAll('.image-container'); Quote Link to post Share on other sites
Journalist 12 Posted January 7, 2019 Author Report Share Posted January 7, 2019 23 часа назад, gefard сказал: сорян, замени containers = document.querySelector('.image-container'); на containers = document.querySelectorAll('.image-container'); Спасибо! Работает ) Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.