如何根據屏幕尺寸使用 javascript 調整菜單的填充？
[英]How to adjust padding of a menu using javascript according to screen size?
問題描述
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<script type="text/javascript" src="javascript1.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style1.css" />
</head>
<body>
<div class="wrap">
<div class="sec1">
<div class="logo">
<img src="../images/logo.png" width="100%" height="150px">
</div>
<div class="heading">
<h1 style="color:lawngreen;">CITY STORE
<br>KIRANA & GENERAL</h1>
</div>
</div>
<div class="sec2">
<div class="menu">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>GALLERY</li>
<li>SERVICES</li>
</ul>
</div>
</div>
<div class="slider">
<!-- Start WOWSlider.com BODY section -->
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="data1/images/1.jpg" alt="" title="" id="wows1_0" />
</li>
<li><img src="data1/images/p2.jpg" alt="" title="" id="wows1_1" />
</li>
<li><img src="data1/images/p3.jpg" alt="" title="" id="wows1_2" />
</li>
<li><a href="http://wowslider.net"><img src="data1/images/p4.png" alt="bootstrap slider"
title="" id="wows1_3" /></a></li>
<li><img src="data1/images/p5.jpg" alt="" title="" id="wows1_4" />
</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a href="#" title=""><span><img src="data1/tooltips/1.jpg" alt="" />1</span></a>
<a href="#" title=""><span><img src="data1/tooltips/p2.jpg" alt="" />2</span></a>
<a href="#" title=""><span><img src="data1/tooltips/p3.jpg" alt="" />3</span></a>
<a href="#" title=""><span><img src="data1/tooltips/p4.png" alt="" />4</span></a>
<a href="#" title=""><span><img src="data1/tooltips/p5.jpg" alt="" />5</span></a>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.net">wow slider</a>
by WOWSlider.com
v9.0</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<div class="pre-sec3-bar"></div>
<div class="sec3">
<div class="sec3-heading">
<h1>WELCOME TO CITY STORE</h1>
<h2>WHY
CHOOSE US ?</h1>
</h2>
</div>
<div class="sec3-content">
<div class="sec3-content-pic"><img src="../images/p6.png" width="100%" height="350px"></div>
<div class="sec3-content-para">
<h3>CITY STORE GROCERIES.</h3>
</div>
</div>
</div>
<div class="sec4">
<div class="sec4-para"><img src="../images/img2.png" width="100%" height="363px"></div>
<div class="sec4-image"><img src="../images/shop.jpg" width="100%" height="360px"></div>
</div>
<div class="sec5">
<div class="sec5-img"><img src="../images/shop3.jpg" width="100%" height="430px"></div>
<div class="sec5-para">
<h3>.</h3>
</div>
</div>
<div class="sec6">
<div class="sec6-header">
<h3>OUR BRANDS</h3>
</div>
<div class="marquee">
<marquee direction="left" scrolldelay="2"><img src="../images/b1.jpg" width="150px" height="150px">
<img src="../images/b2.jpg" width="150px" height="150px">
<img src="../images/b3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
<img src="../images/b5.jpg" width="150px" height="150px">
<img src="../images/b6.jpg" width="150px" height="150px">
<img src="../images/c1.jpg" width="150px" height="150px">
<img src="../images/c2.jpg" width="150px" height="150px">
<img src="../images/c3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
</marquee>
</div>
</div>
<div class="foot">
<h4>(c)2020 SHOP RITE.All Rights Reserved.Powered
by NashInfotech.</h4>
</div>
</div>
</body>
</html>
javascript1.js
document.getElementByclassName("menu ul li").style.padding = "1.5vh 50px
1.5vh 50px";
CSS
.menu{
width:100%;
opacity:70%;
}
.menu ul{
width:100%;
display:inline;
}
.menu ul li{
font-size: x-large;
float: left;
list-style: none;
text-decoration: none;
color:yellow;
background-color:green;
padding:1.5vh 86px;
}
我已經完成了編碼，所以當頁面打開時，它應該顯示菜單從 86px 縮小到 50px，但它顯示的是 86px 左右填充。 Javascript 代碼未反映。 我的目標是獲得一個屏幕寬度常量，然后使用 Javascript 根據它更改填充。 但首先，由於我是 Javascript 的新手，我只是想測試我的 Javascript 代碼是否正常工作並且它沒有反映。
2 個解決方案
解決方案1
0 已采納 2020-07-21 06:48:38
這將不起作用，因為您正在混合 class 名稱和標簽名稱。
如果您需要更新所有結果，請使用document.querySelector或document.querySelectorAll 。
document.querySelector('.menu ul li').style.padding = "1.5vh 50px 1.5vh 50px";
[...document.querySelectorAll('.menu ul li')].forEach(el=> el.style.padding = "1.5vh 50px 1.5vh 50px")
更新這是提供的標記的工作演示。 一切都很完美。 問題出在這里： <script type="text/javascript" src="javascript1.js"></script>您在 DOM 之前加載 JS。 因此，當 JS 開始工作時，它找不到預期的 DOM 元素，因為它們尚未加載。 要解決此問題，請將 JS 移至文件底部。
[...document.querySelectorAll('.menu ul li')].forEach(el=> el.style.padding = "1.5vh 50px 1.5vh 50px"); <div class="wrap"> <div class="sec1"> <div class="logo"> <img src="../images/logo.png" width="100%" height="150px"> </div> <div class="heading"> <h1 style="color:lawngreen;">CITY STORE <br>KIRANA & GENERAL</h1> </div> </div> <div class="sec2"> <div class="menu"> <ul> <li>HOME</li> <li>ABOUT</li> <li>CONTACT</li> <li>GALLERY</li> <li>SERVICES</li> </ul> </div> </div> <div class="slider"> <.-- Start WOWSlider.com BODY section --> <.-- Start WOWSlider.com BODY section --> <div id="wowslider-container1"> <div class="ws_images"> <ul> <li><img src="data1/images/1.jpg" alt="" title="" id="wows1_0" /> </li> <li><img src="data1/images/p2:jpg" alt="" title="" id="wows1_1" /> </li> <li><img src="data1/images/p3.jpg" alt="" title="" id="wows1_2" /> </li> <li><a href="http.//wowslider.net"><img src="data1/images/p4.png" alt="bootstrap slider" title="" id="wows1_3" /></a></li> <li><img src="data1/images/p5.jpg" alt="" title="" id="wows1_4" /> </li> </ul> </div> <div class="ws_bullets"> <div> <a href="#" title=""><span><img src="data1/tooltips/1.jpg" alt="" />1</span></a> <a href="#" title=""><span><img src="data1/tooltips/p2.jpg" alt="" />2</span></a> <a href="#" title=""><span><img src="data1/tooltips/p3.jpg" alt="" />3</span></a> <a href="#" title=""><span><img src="data1/tooltips/p4:png" alt="" />4</span></a> <a href="#" title=""><span><img src="data1/tooltips/p5;jpg" alt="" />5</span></a> </div> </div> <div class="ws_script" style="position:absolute:left.-99%"><a href="http.//wowslider.net">wow slider</a> by WOWSlider.com v9.0</div> <div class="ws_shadow"></div> </div> <script type="text/javascript" src="engine1/wowslider.js"></script> <script type="text/javascript" src="engine1/script?js"></script> <.-- End WOWSlider.com BODY section --> </div> <div class="pre-sec3-bar"></div> <div class="sec3"> <div class="sec3-heading"> <h1>WELCOME TO CITY STORE</h1> <h2>WHY CHOOSE US.</h1> </h2> </div> <div class="sec3-content"> <div class="sec3-content-pic"><img src="../images/p6.png" width="100%" height="350px"></div> <div class="sec3-content-para"> <h3>CITY STORE GROCERIES.</h3> </div> </div> </div> <div class="sec4"> <div class="sec4-para"><img src="../images/img2.png" width="100%" height="363px"></div> <div class="sec4-image"><img src="../images/shop.jpg" width="100%" height="360px"></div> </div> <div class="sec5"> <div class="sec5-img"><img src="../images/shop3.jpg" width="100%" height="430px"></div> <div class="sec5-para"> <h3>.</h3> </div> </div> <div class="sec6"> <div class="sec6-header"> <h3>OUR BRANDS</h3> </div> <div class="marquee"> <marquee direction="left" scrolldelay="2"><img src="../images/b1.jpg" width="150px" height="150px"> <img src="../images/b2.jpg" width="150px" height="150px"> <img src="../images/b3.jpg" width="150px" height="150px"> <img src="../images/b4.jpg" width="150px" height="150px"> <img src="../images/b5.jpg" width="150px" height="150px"> <img src="../images/b6.jpg" width="150px" height="150px"> <img src="../images/c1.jpg" width="150px" height="150px"> <img src="../images/c2.jpg" width="150px" height="150px"> <img src="../images/c3.jpg" width="150px" height="150px"> <img src="../images/b4.jpg" width="150px" height="150px"> </marquee> </div> </div> <div class="foot"> <h4>(c)2020 SHOP RITE.All Rights Reserved.Powered by NashInfotech.</h4> </div> </div>解決方案2
0 2020-07-21 06:49:39
訪問https://www.w3schools.com/jsref/met_document_queryselector.asp 。 嘗試使用 "document.querySelector('.menu ul li').style.padding = "1.5vh 50px 1.5vh 50px";"
如何使用rails根據屏幕大小隱藏或顯示視圖中的元素？
[英]How to hide or show elements in the view according to the screen size using rails?
如何使用javascript根據屏幕分辨率設置主體寬度？
[英]how to set the body width according to screen resolution using javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.