发表新帖
发表新帖

Extract the current DOM and print it as a string, with styles intact

前端 未结
关注
8 1633
执笔经年
执笔经年 2020-12-07 08:19

I\'d like to be able to take my DOM, as is, and convert it to a string. Let\'s say I open up the inspector and make a change to the margin-left property of a particular ele

相关标签:
8条回答
  • 闹比i
    2020-12-07 09:20

    Maybe the Google Closure Library has a solution for you.

    There's code that seems to do what you need, i.e., to compute the CSS rules to reproduce the same appearance of an element outside of its current position in the dom (in their case they need that to transfer styles into an iframe to use it as a seamless inline editor).

    Quoting from the source file style.js:

    /**
 * @fileoverview Provides utility routines for copying modified
 * `CSSRule` objects from the parent document into iframes so that any
 * content in the iframe will be styled as if it was inline in the parent
 * document.
 *
 * <p>
 * For example, you might have this CSS rule:
 *
 * #content .highlighted { background-color: yellow; }
 *
 * And this DOM structure:
 *
 * <div id="content">
 *   <iframe />
 * </div>
 *
 * Then inside the iframe you have:
 *
 * <body>
 * <div class="highlighted">
 * </body>
 *
 * If you copied the CSS rule directly into the iframe, it wouldn't match the
 * .highlighted div. So we rewrite the original stylesheets based on the
 * context where the iframe is going to be inserted. In this case the CSS
 * selector would be rewritten to:
 *
 * body .highlighted { background-color: yellow; }
 * </p>
 */
    0 讨论(0)
  • 独厮守ぢ
    2020-12-07 09:23

    Internet Explorer -> Developer Tools -> DOM Explorer

    Select element and right click -> "Copy element with styles".

    0 讨论(0)
 看不清?
提交回复
热议问题