当前位置: 首页 > 面试题库 >

导出DOM元素的CSS

刘和玉
2023-03-14
问题内容

我经常在网上找到漂亮的样式。要复制DOM元素的CSS,我使用Google
Chrome开发者工具检查该元素,查看各种CSS属性,然后将其手动复制到我自己的样式表中。

是否可以轻松导出给定DOM元素的所有CSS属性?


问题答案:

这是一种exportStyles()方法的代码,该方法应返回一个CSS字符串,包括给定元素的所有内联和外部样式,默认值 除外 (这是主要困难)。

例如: console.log(someElement.exportStyles());

由于您使用的是Chrome,因此我无需理会它与IE兼容。实际上,只需要浏览器支持该getComputedStyle(element)方法即可。

Element.prototype.exportStyles = (function () {

    // Mapping between tag names and css default values lookup tables. This allows to exclude default values in the result.
    var defaultStylesByTagName = {};

    // Styles inherited from style sheets will not be rendered for elements with these tag names
    var noStyleTags = {"BASE":true,"HEAD":true,"HTML":true,"META":true,"NOFRAME":true,"NOSCRIPT":true,"PARAM":true,"SCRIPT":true,"STYLE":true,"TITLE":true};

    // This list determines which css default values lookup tables are precomputed at load time
    // Lookup tables for other tag names will be automatically built at runtime if needed
    var tagNames = ["A","ABBR","ADDRESS","AREA","ARTICLE","ASIDE","AUDIO","B","BASE","BDI","BDO","BLOCKQUOTE","BODY","BR","BUTTON","CANVAS","CAPTION","CENTER","CITE","CODE","COL","COLGROUP","COMMAND","DATALIST","DD","DEL","DETAILS","DFN","DIV","DL","DT","EM","EMBED","FIELDSET","FIGCAPTION","FIGURE","FONT","FOOTER","FORM","H1","H2","H3","H4","H5","H6","HEAD","HEADER","HGROUP","HR","HTML","I","IFRAME","IMG","INPUT","INS","KBD","KEYGEN","LABEL","LEGEND","LI","LINK","MAP","MARK","MATH","MENU","META","METER","NAV","NOBR","NOSCRIPT","OBJECT","OL","OPTION","OPTGROUP","OUTPUT","P","PARAM","PRE","PROGRESS","Q","RP","RT","RUBY","S","SAMP","SCRIPT","SECTION","SELECT","SMALL","SOURCE","SPAN","STRONG","STYLE","SUB","SUMMARY","SUP","SVG","TABLE","TBODY","TD","TEXTAREA","TFOOT","TH","THEAD","TIME","TITLE","TR","TRACK","U","UL","VAR","VIDEO","WBR"];

    // Precompute the lookup tables.
    for (var i = 0; i < tagNames.length; i++) {
        if(!noStyleTags[tagNames[i]]) {
            defaultStylesByTagName[tagNames[i]] = computeDefaultStyleByTagName(tagNames[i]);
        }
    }

    function computeDefaultStyleByTagName(tagName) {
        var defaultStyle = {};
        var element = document.body.appendChild(document.createElement(tagName));
        var computedStyle = getComputedStyle(element);
        for (var i = 0; i < computedStyle.length; i++) {
            defaultStyle[computedStyle[i]] = computedStyle[computedStyle[i]];
        }
        document.body.removeChild(element); 
        return defaultStyle;
    }

    function getDefaultStyleByTagName(tagName) {
        tagName = tagName.toUpperCase();
        if (!defaultStylesByTagName[tagName]) {
            defaultStylesByTagName[tagName] = computeDefaultStyleByTagName(tagName);
        }
        return defaultStylesByTagName[tagName];
    }

    return function exportStyles() {
        if (this.nodeType !== Node.ELEMENT_NODE) {
            throw new TypeError("The exportStyles method only works on elements, not on " + this.nodeType + " nodes.");
        }
        if (noStyleTags[this.tagName]) {
            throw new TypeError("The exportStyles method does not work on " + this.tagName + " elements.");
        }
        var styles = {};
        var computedStyle = getComputedStyle(this);
        var defaultStyle = getDefaultStyleByTagName(this.tagName);
        for (var i = 0; i < computedStyle.length; i++) {
            var cssPropName = computedStyle[i];
            if (computedStyle[cssPropName] !== defaultStyle[cssPropName]) {
                styles[cssPropName] = computedStyle[cssPropName];
            }
        }

        var a = ["{"];
        for(var i in styles) {
            a[a.length] = i + ": " + styles[i] + ";";
        }
        a[a.length] = "}"
        return a.join("\r\n");
    }

})();


 类似资料:
  • 问题内容: 我正在尝试测试DOM元素是否存在,如果确实存在,则将其删除,如果不存在,则将其创建。 检查是否存在,创建元素有效,但删除该元素无效。基本上,所有这些代码所做的就是通过单击按钮将iframe注入网页。我想发生的是,如果iframe已经存在,可以删除它。但是由于某种原因,我失败了。 问题答案: 应该在父级上调用,即: 在您的示例中,您应该执行以下操作:

  • 我有问题,因为我想在内部包围一些,所以我需要知道。 哪些DOM元素可以是tr的子元素?(我知道div不能。)

  • 我有一个来自服务器的响应,我想把它放到列表中。但是当列表为空时,我需要隐藏这个div容器。例如,如果不在数组中-我想隐藏div。但是我想在ng之后使用bird重复,所以我不能使在上。我可以检查li是否为空,然后隐藏div吗? 普朗克例子 AngularJS ng-重复处理空列表大小写-这是不一样的。如果li是空的,我不想隐藏li,我想在li是空的时候隐藏父元素h1。

  • 问题内容: 如果我做: 包含一个空对象,而不是iframe元素,为什么? 问题答案: JSON( JavaScript对象 表示法) 不是 为序列化DOM节点 而 设计的,您需要自己拉出所需的内容并将其写入对象,然后根据需要重新创建DOM节点。 实际上,Chrome甚至不执行您的代码:

  • 问题内容: 我想了解jQuery对象和DOM元素之间的关系。 当jQuery返回一个元素时,它会显示为警报。当返回一个元素时,它显示为。这到底是什么意思?我的意思是说两个对象都有区别吗? 还有什么方法可以对jQuery对象和DOM元素进行操作?一个jQuery对象可以代表多个DOM元素吗? 问题答案: 我想了解jQuery对象和DOM元素之间的关系 jQuery对象是包含DOM元素的类似于数组的对

  • 我可以通过以下方式访问dev中的用户名: 有没有其他方法可以通过webdriver访问ShadowDOM元素?