Как редактировать css внутри javascript
У меня есть логотип на моем веб-сайте, когда пользователь открывает мой веб-сайт, логотип становится большим, но когда он прокручивает его, он становится маленьким. я сделал это, используя javascript, как показано ниже
window.onscroll = function() {
growShrinkLogo()
};
function growShrinkLogo() {
var Logo = document.getElementById("logo")
if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
Logo.style.width = '80px';
} else {
Logo.style.width = '200px';
}
}<div class = "logo">
<div class = "relative-logo">
<img id = "logo" src = "assets/images/logo.png" alt = "logo">
</div>
</div>первый логотип, который появляется, немного правее страницы, а второй - точно в центре, как показано на изображениях ниже.
когда я пытаюсь переместить большой логотип, он влияет на маленький логотип, потому что оба они находятся в одном и том же div. как я могу сделать логотип большего размера, который появляется при загрузке страницы в центр, не влияя на логотип меньшего размера. кто-нибудь может помочь
Где второй логотип?
@mplungjan, но оба логотипа находятся в одном div
@ Adriani6 оба являются одним логотипом, просто использовали js, чтобы сделать его большим и маленьким.
Вот так: .logo { width:100%; text-align:center } #logo {margin:auto}
@mplungjan не работает
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы поместили скрипт перед закрывающим тегом body? Я попробовал ваш код, он все еще меняет ширину?
window.onscroll = function() {
growShrinkLogo()
};
function growShrinkLogo() {
var Logo = document.getElementById("logo")
if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
Logo.style.width = '80px';
} else {
Logo.style.width = '200px';
}
}<div class = "logo">
<div class = "relative-logo">
<img id = "logo" src = "http://pngimg.com/uploads/google/google_PNG19644.png" alt = "logo">
</div>
</div>
<div>
</div>я не понял что ты сказал
Есть несколько способов добиться этого.
- Используйте два разных элемента HTML (два логотипа), а затем скройте/покажите их, подобно тому, как вы меняете CSS одного элемента. Таким образом, вы можете независимо изменять CSS каждого логотипа.
- Измените CSS вашего основного логотипа для загрузки страницы, а затем исправьте его обратно с помощью JavaScript (по сути, удалите все, что вы добавили для большого логотипа).
Обновлять:
Перечитав ваш вопрос, я думаю, что понял.
Попробуйте добавить это в свой CSS (обновите в соответствии с вашими потребностями):
.relative-logo {
display: flex;
justify-content: center;
align-items: center;
}
Это должно выровнять оба ваших логотипа по центру и заставить их оставаться по центру независимо от их размера.
@ZubairShah Я обновил свой ответ, думаю, теперь я понимаю, что вам нужно.
но ширина не увеличивается, как я хочу
Я не понял вашего последнего комментария. Ваш вопрос how can i make the bigger logo which appears when the page load to the center without effecting the smaller logo. Вы никогда не упоминали, что ширина не увеличивается.
ширина увеличивается в моем javascript
но когда я использую ваш код, ширина не увеличивается, его размер немного больше, чем мой меньший логотип, но он не меняет размер, который я указал в своем js. до использования вашего кода он работал правильно
Тебе удалось это исправить, @ZubairShah? Мой код CSS не должен изменять размер изображения. Это странно.
Давайте продолжить обсуждение в чате.
window.onscroll = function() {
growShrinkLogo();
};
function growShrinkLogo() {
var Logo = document.getElementById("logo");
if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
Logo.style.width = '80px';
Logo.style.marginLeft = '60px';
} else {
Logo.style.width = '200px';
Logo.style.marginLeft = '0px';
}
}<div class = "logo">
<div class = "relative-logo">
<img id = "logo" src = "assets/images/logo.png" alt = "Logo" />
</div>
</div>Это будет работать, если вы еще не определили поле в своем CSS и вместо этого использовали позицию. Я думаю..... попробуй.
margin:auto может помочь?