簡體   English   中英

如何使用 JavaScript 添加整個部分?

[英]How to add a whole section using JavaScript?

所以我正在嘗試編寫一個腳本來向 Adobe Analytics 添加一個完整的、新添加的部分。 我不確定我能做到,所以我會感謝你的幫助。 我想我應該在該部分添加一個 class 名稱並使用 document.getElementsbyClassName 但它似乎不起作用? 我還需要再次使用 JS 添加嵌套的 div 及其 styles 嗎? 這是我的代碼:

 <section class="flex-columns" style=" background-color: crimson; height: 450px; display: flex; justify-content: center; align-items: center; "> <div style=" top: 132px; left: 340px; width: 400px; height: 400px; background: #FFFFFF 0% 0% no-repeat padding-box; border-radius: 10px; opacity: 1; margin-left: 5px; margin-right: 15px; "> <p style=" top: 187px; left: 391px; width: 31px; height: 138px; text-align: left; font: normal normal bold 120px/36px Value; letter-spacing: 0px; opacity: 1; margin-top: 65px; margin-left: 30px; color: black; border-style: solid; border-color: black; ">1</p> <p style=" top: 326px; left: 391px; width: 298px; height: 152px; text-align: left; font: normal normal bold 45px/50px Value; letter-spacing: 0px; color: #888888; opacity: 1; margin-left: 30px; ">Find your nearest store</p> </div> <div style=" top: 132px; left: 340px; width: 400px; height: 400px; background: #FFFFFF 0% 0% no-repeat padding-box; border-radius: 10px; opacity: 1; margin-left: 5px; margin-right: 15px; "> <p style=" top: 187px; left: 811px; width: 66px; height: 138px; text-align: left; font: normal normal bold 120px/36px Value; letter-spacing: 0px; color: black; opacity: 1; margin-top: 65px; margin-left: 30px; ">2</p> <p style=" top: 326px; left: 811px; width: 298px; height: 152px; text-align: left; font: normal normal bold 45px/50px Value; letter-spacing: 0px; color: #888888; opacity: 1; margin-left: 30px; ">Book a free hearing test</p> </div> <div style=" top: 132px; left: 340px; width: 400px; height: 400px; background: #FFFFFF 0% 0% no-repeat padding-box; border-radius: 10px; opacity: 1; margin-left: 5px; margin-right: 15px; "> <p style=" top: 187px; left: 1231px; width: 68px; height: 138px; text-align: left; font: normal normal bold 120px/36px Value; letter-spacing: 0px; color: black; border: 2px; border-color: black; margin-top: 65px; margin-left: 30px; ">3</p> <p style=" top: 326px; left: 1231px; width: 298px; height: 152px; text-align: left; font: normal normal bold 45px/50px Value; letter-spacing: 0px; color: #888888; opacity: 1; margin-left: 30px; /* margin-bottom: 0px; */ ">Get supported by our experts</p> </div> </section>

由於帖子編輯隊列已滿,我再次分享該領域的當前工作。 你能更清楚地解釋這個問題嗎?

 /* I don't understand what the problem is and what you want to do! */
 .section-style { background-color: crimson; height: 450px; display: flex; justify-content: center; align-items: center; } /* Common */.columns { top: 132px; left: 340px; width: 400px; height: 400px; background: #FFFFFF 0% 0% no-repeat padding-box; border-radius: 10px; opacity: 1; margin-left: 5px; margin-right: 15px; }.titles{ top: 187px; height: 138px; text-align: left; font: normal normal bold 120px/36px Value; letter-spacing: 0px; margin-top: 65px; margin-left: 30px; color: black; }.contents{ top: 326px; width: 298px; height: 152px; text-align: left; font: normal normal bold 45px/50px Value; letter-spacing: 0px; color: #888888; opacity: 1; margin-left: 30px; } /* Titles */.title-first { left: 391px; width: 31px; opacity: 1; border-style: solid; border-color: black; }.title-second { left: 811px; width: 66px; opacity: 1; }.title-thirth { left: 1231px; width: 68px; border: 2px; border-color: black; } /* Contents */.content-first { left: 391px; height: 152px; }.content-second { left: 811px; }.content-thirth { left: 1231px; /* margin-bottom: 0px; */ }
 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test Application</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="flex-columns section-style"> <div class="columns"> <p class="titles title-first">1</p> <p class="contents content-first">Find your nearest store</p> </div> <div class="columns"> <p class="titles title-second">2</p> <p class="contents content-second">Book a free hearing test</p> </div> <div class="columns"> <p class="titles title-thirth">3</p> <p class="contents content-thirth">Get supported by our experts</p> </div> </section> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM