网络用户界面的新手。我们有一个复杂的设置，需要代码并使用一堆 javascript 生成生成的 HTML 5 和 CSS 3。我需要能够在通过几个工作流程(启动一堆我不理解的 javascript DOM 更改)后捕获生成的 HTML/CSS，以便我可以与我的设计师一起调整布局并回馈给开发者进行改变。
有没有办法做到这一点？我能够从 firebug 复制 HTML，但它仍然引用服务器上的 CSS，并且没有一种简单的方法来下载 CSS 并更新 HTML 以在本地指向它们。
谢谢!
最佳答案
当您使用 firefox 或 chrome 将复制的 HTML 粘贴到框中时，以下页面将创建一个下载链接。
<html>
<b>Select All, Copy, and paste below to download the full copied HTML</b>
<div id=drop contentEditable
style="padding: 1em; height: 30em; background:#bbb;overflow:hidden; ">
</div>
<a id=out download=copied.html style=display:none> Download </a>
<script>
var out=document.getElementById("out"),
drop=document.getElementById("drop");
drop.onpaste=function doPaste(){
setTimeout(function(){
out.href="data:x-application/html,"+
escape(drop.innerHTML);
drop.style.display="none";
out.style.display="block";
}, 50);
};
</script>
</html>
与您的网站一起使用，
- 做些改变页面的事情，然后点击页面背景的空白区域，然后 按 [CTRL]+[A] (win) 或 [CMD]+[A] (mac)
- 使用右键单击或键盘复制
- 粘贴到上面显示的文件中的框中
- 点击“下载”下载生成的 html 文件。
因为它是一个很小的文件，所以我继续扔了 a copy online所以你可以试试看；这个页面效果很好。
请注意，样式信息已转换为样式属性，因此您不需要 css 文件，但与此同时，您没有所应用样式的文件名，而某些设计师可能需要...
关于javascript - 用于捕获 html 5/css 3 页面状态的工具，以便视觉设计人员可以进行更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16290094/