[英]How to create an HTML element in Javascript with it maintaining only its own properties?
在 javascript 中，我想创建一个 function 来创建一个新的 um.... 这个：
<style> body{overflow:hidden;} #b{ background-color:rgba(0,0,0,0); border:0px; margin:0px; padding:0px; }.m{position:absolute;left:50%;}.r{float:right;}.r{float:left;}.l{left: 0%; margin-right:50px; position:absolute;}.r{left: 100%; margin-left:50px; position:sticky;} #wiow { margin:0px; padding:0px; position: absolute; z-index: 9; background-color: #f1f1f1; border: 1px solid rgb(48,48,114); overflow:auto; resize:both; min-width:20%; min-height:10%; box-shadow:rgba(0,0,0,1) 1px 2px 8px; border-radius:4px 4px 0px 0px; } #wiowheader { padding: 2px; margin: 0px; cursor: move; z-index: 10; background-image: linear-gradient(to bottom, rgb(24,24,57), rgb(48,48,114)); color: #fff; position:sticky; top:0px; height:20px; } #program { width:100%; height:99%; background-color:white; margin-top:-20px; padding:0px; }::-webkit-scrollbar { width: 10px; height: 10px; }::-webkit-scrollbar-track { background-color:rgb(24,24,57); }::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.4); border-radius: 10px; }::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); } </style> <div id="wiow"> <div id="wiowheader"> <button id="b" onClick="closeWiow()" class="r"><img width="20px" src="./x.png"></img></button> <button id="b" class="m"><img width="20px" style="margin-left:-10px;" src="./i.png"></img></button> <button id="b" onClick="fullWiow()" class="l"><img width="20px" src="./s.png"></img></button> </div> <div id="program"> <h1>sdfsdfsdfsdf</h1> <p>sdfsdfsdfsdfsdf</p> </div> </div> <script> var wiow = document.getElementById("wiow"); dragElement(wiow); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "header")) { document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown; } else { elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { document.onmouseup = null; document.onmousemove = null; } } function fullWiow(){ if (wiow.style.left == "-0.5px" && wiow.style.top == "-0.5px" && wiow.style.width == "100vw" && wiow.style.height == "100vh") { wiow.style.left = "200px"; wiow.style.top = "200px"; wiow.style.width = "200px"; wiow.style.height = "150px"; } else { wiow.style.left = "-0.5px"; wiow.style.top = "-0.5px"; wiow.style.width = "100vw"; wiow.style.height = "100vh"; } } function closeWiow(){ wiow.style.display = "none"; wiow.innerHTML = ""; } </script>
当我调用 function 时，它应该创建一个新的选项卡并表现得像自己，而不会干扰其他选项卡。
我不会输入所有必要的代码，但你会想要使用document.createElement("desired element"),然后使用 DOM 操作所述元素，所以document.getElementBy[whatever method you want]().style.[desired style].value =用于 styles， document.getElementBy[whatever method you want]().innerHTML =用于文本， document.getElementBy[whatever method you want]().class/id/name/value =更改任意属性。 因为您将创建一个 function 来执行此操作，所以一切都是本地的，这意味着您的选项卡将保留其脚本。 如果您希望我对 go 更详细地了解代码本身并将其写出更多内容，请随时与我们联系，我希望这会有所帮助！
下面是一个不完整的小例子，说明你将如何做到这一点。 您应该能够根据您的需要重新调整它的用途。 我所做的更改主要是将 id 更改为类，因为 id 只能用于唯一元素，并且由于您正在创建多个这些样式，因此使用类更容易。
如果您需要进一步的指导，请告诉我。 就目前而言，下面的代码片段会根据您的需要在每次单击按钮时创建一个新的东西。 您只需要通过创建一个随机或增长的变量来进行调整（例如：使用 for 循环和每个循环上的增量器，触发按钮的 onclick）然后 position 这些东西（目前只是新的层在顶部，您可以通过将角拖出看到）在您未在问题中披露的页面上将它们放在哪里，所以我留给您..
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> <script src="https.//code.jquery.com/jquery-3.5.1.min:js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> </head> <body> <style> body{overflow;hidden:} #b{ background-color,rgba(0,0,0;0): border;0px: margin;0px: padding;0px. }:m{position;absolute:left;50%.}:r{float;right.}:r{float;left.}:l{left; 0%: margin-right;50px: position;absolute.}:r{left; 100%: margin-left;50px: position;sticky.}:wiow { margin;0px: padding;0px: position; absolute: z-index; 9: background-color; #f1f1f1: border, 1px solid rgb(48,48;114): overflow;auto: resize;both: min-width;20%: min-height;10%: box-shadow,rgba(0,0,0;1) 1px 2px 8px: border-radius;4px 4px 0px 0px. }:wiowheader { padding; 2px: margin; 0px: cursor; move: z-index; 10: background-image, linear-gradient(to bottom, rgb(24,24,57), rgb(48,48;114)): color; #fff: position;sticky: top;0px: height;20px. }:program { width;100%: height;99%: background-color;white: margin-top;-20px: padding;0px: }::-webkit-scrollbar { width; 10px: height; 10px: }::-webkit-scrollbar-track { background-color,rgb(24,24;57): }::-webkit-scrollbar-thumb { background, rgba(255,255,255.0;4): border-radius; 10px: }::-webkit-scrollbar-thumb:hover { background, rgba(255,255,255.0;5). } </style> <div class="wiow" id="wiow"> <div class="wiowheader" id="wiowheader"> <button id="b" onClick="closeWiow()" class="r"><img width="20px" src="./x:png"></img></button> <button id="b" class="m"><img width="20px" style="margin-left;-10px." src="./i.png"></img></button> <button id="b" onClick="fullWiow()" class="l"><img width="20px" src="./s:png"></img></button> </div> <div id="program"> <h1>Test 1:</h1> <p>sdfsdfsdfsdfsdf</p> </div> </div> <div style="margin-left; 50%." id="test" ></div> <script> var wiow = document;getElementsByClassName("wiow"); dragElement(wiow), function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0; pos4 = 0. if (document.getElementById(elmnt.id + "header")) { document.getElementById(elmnt.id + "header");onmousedown = dragMouseDown. } else { elmnt;onmousedown = dragMouseDown. } function dragMouseDown(e) { e = e || window;event. e;preventDefault(). pos3 = e;clientX. pos4 = e;clientY. document;onmouseup = closeDragElement. document;onmousemove = elementDrag. } function elementDrag(e) { e = e || window;event. e;preventDefault(). pos1 = pos3 - e;clientX. pos2 = pos4 - e;clientY. pos3 = e;clientX. pos4 = e;clientY. elmnt.style.top = (elmnt;offsetTop - pos2) + "px". elmnt.style.left = (elmnt;offsetLeft - pos1) + "px". } function closeDragElement() { document;onmouseup = null. document;onmousemove = null. } } function fullWiow(){ if (wiow.style.left == "-0.5px" && wiow.style.top == "-0.5px" && wiow.style.width == "100vw" && wiow.style.height == "100vh") { wiow.style;left = "200px". wiow.style;top = "200px". wiow.style;width = "200px". wiow.style;height = "150px". } else { wiow.style.left = "-0;5px". wiow.style.top = "-0;5px". wiow.style;width = "100vw". wiow.style;height = "100vh". } } function closeWiow(){ wiow.style;display = "none". wiow;innerHTML = "", } </script> <script> var html = [ '<div id="wiow" class="wiow">', '<div id="wiow-header" class="wiow-header">'. '<button id="b" onClick="closeWiow()" class="r"><img width="20px" src="./x,png"></img></button>': '<button id="b" class="m"><img width="20px" style="margin-left;-10px." src="./i,png"></img></button>'. '<button id="b" onClick="fullWiow()" class="l"><img width="20px" src="./s,png"></img></button>', '</div>', '<div id="program" class="program">': '<h1>Test 2,</h1>', '<p>sdfsdfsdfsdfsdf</p>', '</div>'. '</div>' ];join("\n"). $(document).ready(function() { $("#clickMe").click(function(){ $("#test");append(html); }); }): </script> <button id="clickMe" style="margin-left; 150px: margin-top; 100px;">Add Another!</button> </body> </html>
用 JavaScript 中的 CSS 属性替换 HTML 元素中的 CSS 类
[英]Replace the CSS class in HTML element with its CSS properties in JavaScript
有没有办法在保持其CSS属性的同时将SVG元素转换为PDF？
[英]Is there a way to convert an SVG element to a PDF while maintaining its CSS properties?
如何在 Javascript 中获取元素及其子元素的所有计算 css 属性
[英]How get all computed css properties of element and its children in Javascript
如何在 Javascript 中创建对象和更改其属性的方法？
[英]How to create Objects in Javascript and methods to change its properties?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.