不显示样式和类，当使用JS将div添加到我的HTML时

huangapple
go评论102阅读模式
英文:

Doesn't show both style and class when added div to my HTML using JS

问题

以下是您要翻译的内容：

"Doesn't show both style and class in console when added div to my HTML using JS, also bootstrap classes don't work,

Here is the code for main_page:

  1. <?php
  2. require "connection.php";?>
  3. <html>
  4. <head>
  5. 	<link rel = "stylesheet" href = "css/bootstrap.min.css" />
  6. 	<link rel = "stylesheet" href = "css/style.css" />
  7. </head>
  8. <body>
  9. <header>
  10. 	<?php require "header.php"; ?>
  11. </header>
  12. <main>
  13. 	<?php require "main_content.php"; ?>
  14. </main>
  15. <footer>
  16. 	<?php ?>
  17. </footer>
  18. </body>
  19. <script src = "js/change_avatar_settings.js"></script>
  20. <script src = "js/jQuery.js"></script>
  21. <script src = "js/bootstrap.bundle.min.js"></script>
  22. </html>

Here is the code for main_content.php:

  1. <main class = "container mt-5">
  2. <div class = "display-none" id = "change_display">
  3. 	<div id = "change_avatar" class = "container">
  4. 	</div>
  5. </div>	
  6. </main>

Here is the JS code called from onclick function (which is in header) (no problem from calling a function), the problem is in that both class - "armen" and style doesn't work in my html, but div with form is created without any issues.

  1. function changeAvatar() {
  2. 	document.getElementById('change_avatar').innerHTML += '<div class = "armen" style = "width:500px;height:500px;"><form action="" method="post" enctype="multipart/form-data"><input type="file" name="image"><input type="submit" value="Upload Image" name="avatar_btn"><input type="submit" value="Delete Image" name="del_avatar_btn"></form></div>'
  3. }
英文:

Doesn't show both style and class in console when added div to my HTML using JS, also bootstrap classes don't work,

Here is the code for main_page:

  1. <?php
  2. require "connection.php";?>
  3. <html>
  4. <head>
  5. 	<link rel = "stylesheet" href = "css/bootstrap.min.css" />
  6. 	<link rel = "stylesheet" href = "css/style.css" />
  7. </head>
  8. <body>
  9. <header>
  10. 	<?php require "header.php"; ?>
  11. </header>
  12. <main>
  13. 	<?php require "main_content.php"; ?>
  14. </main>
  15. <footer>
  16. 	<?php ?>
  17. </footer>
  18. </body>
  19. <script src = "js/change_avatar_settings.js"></script>
  20. <script src = "js/jQuery.js"></script>
  21. <script src = "js/bootstrap.bundle.min.js"></script>
  22. </html>

Here is the code for main_content.php:

  1. <main class = "container mt-5">
  2. <div class = "display-none" id = "change_display">
  3. 	<div id = "change_avatar" class = "container">
  4. 	</div>
  5. </div>	
  6. </main>

Here is the JS code called from onclick function (which is in header) (no problem from calling a function), the problem is in that both class - "armen" and style doesn't work in my html, but div with form is created without any issues.

  1. function changeAvatar() {
  2. 	document.getElementById('change_avatar').innerHTML += '<div class = "armen" style = "width:500px;height:500px;"><form action="" method="post" enctype="multipart/form-data"><input type="file" name="image"><input type="submit" value="Upload Image" name="avatar_btn"><input type="submit" value="Delete Image" name="del_avatar_btn"></form></div>'
  3. }

答案1

得分: 0

你的代码在调用函数时似乎运行良好。已添加class和style，如我在其周围放置的红色边框所示，通过该类选择并显示height和width已设置。

英文:

Your code seems to work just fine when I call the function. The class and style are added which is shown by the red border I put around it which selects by that class and shows that the height and width are set on it.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function changeAvatar(){
  2.     document.getElementById(&#39;change_avatar&#39;).innerHTML += `
  3. &lt;div class = &quot;armen&quot; style = &quot;width:500px;height:500px;&quot;&gt;
  4.   &lt;form action=&quot;&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
  5.     &lt;input type=&quot;file&quot; name=&quot;image&quot;&gt;
  6.     &lt;input type=&quot;submit&quot; value=&quot;Upload Image&quot; name=&quot;avatar_btn&quot;&gt;
  7.     &lt;input type=&quot;submit&quot; value=&quot;Delete Image&quot; name=&quot;del_avatar_btn&quot;&gt;
  8.   &lt;/form&gt;
  9. &lt;/div&gt;`
  10. }
  12. changeAvatar();

<!-- language: lang-css -->

  1. .armen {
  2.   border: 1px solid red;
  3. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;change_avatar&quot; class=&quot;container&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月21日 02:48:59
  • 转载请务必保留本文链接：https://go.coder-hub.com/76296862.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定