[英]how to edit css inside javascript
I have a logo in my website, when the user opens my website the logo is big, but when he scrolls it becomes small.我的网站上有一个徽标,当用户打开我的网站时,徽标很大,但是当他滚动时,它变小了。 i did that using javascript like below
我使用如下所示的 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>
the first logo which appears is a littile bit right towards the page and the second is properly in the center, like below images出现的第一个标志是在页面右侧的一点点,第二个标志正确地位于中心,如下图所示
when i am trying to move the bigger logo it is effecting the small logo because both of it is in the same div.当我尝试移动较大的徽标时,它会影响小徽标,因为它们都在同一个 div 中。 how can i make the bigger logo which appears when the page load to the center without effecting the smaller logo.
我怎样才能在页面加载到中心时出现更大的标志而不影响较小的标志。 can anyone help
谁能帮忙
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>
This will work if you haven't already defined a margin in your CSS and used position instead.如果您尚未在 CSS 中定义边距并使用位置,这将起作用。 I think..... try it out.
我想……试试看。
Did you put script before close body tag?您是否在关闭正文标签之前放置了脚本? I tried your code, it still change width?
我试过你的代码,它仍然改变宽度?
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>
There are multiple ways of achieving this.有多种方法可以实现这一点。
Update:更新:
After re-reading your question I think I understand.重新阅读你的问题后,我想我明白了。
Try adding this to your CSS (update according to your needs):尝试将其添加到您的 CSS(根据您的需要更新):
.relative-logo {
display: flex;
justify-content: center;
align-items: center;
}
That should center align both of your logos and make them stay centered regardless of their size.这应该使您的两个徽标居中对齐,并使它们无论大小如何都保持居中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.