前言：

由于业务需求，将页面内容转成pdf，前端需要提供整个页面的dom元素提供给后端，但样式并不是在行内而是在<style>标签里。

解决方案：

通过原生属性 document.styleSheets 读取vue单页面组件加载过的所有css样式

const cssBlock = document.styleSheets

有了获取到的css样式表就能遍历去找到我需要的，由于是伪数组，我们先用ES6解构一下；点开可以发现他的顺序是从页面初始化开始，大概率我们需要的样式会在最后，所以我们用reverse先反转，再通过find去遍历。

遍历后我们可以通过我们需要得样式去获取那一组件的样式。以下是完整代码。

function getCssBlock() {const cssBlock = document.styleSheetsconst styleData = [...cssBlock].reverse().find(({ cssRules }) => {return [...cssRules].find((rule) => {return ['.voucher_head'].includes(rule.selectorText)})})return styleData.ownerNode.innerText
}

在js中获取vue文件的style标签下的内容相关推荐

html遍历table tr,js中获取 table节点各tr及td的内容简单实例
js中获取 table节点各tr及td的内容简单实例 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了js中获取 table节点各tr及td ...
js中获取 table节点各tr及td的内容方法
<table id="tb1" width="200" border="1" cellpadding="4" ce ...
js/jquery 获取本地文件的文件路劲获取input框中type=‘file’ 中的文件路径(转载)...
原文:http://blog.csdn.net/niyingxunzong/article/details/16989947 js/jquery 获取本地文件的文件路劲获取input框中type=' ...
在style标签中，vue项目引入style文件，外部css文件
在style标签中,vue项目引入style文件,外部css文件一.css是什么? 二.使用步骤 1.使用style标签引入 2.在style标签内使用@import导入总结一.css是什么? ...
vue项目在style标签中引入css,less,sass的方法
vue项目 style标签引入 less sass less和sass需要安装相应的依赖 package.json 中加上并再次npm install 重启项目 "less": ...
vue如何在style标签中使用data响应式数据？
文章目录一.面临到的需求? 二.如何在css中使用变量? 三.vue如何在style标签中使用data响应式数据? 一.面临到的需求? 首先我们知道css对应是有伪类的,如:hover, :acti ...
鸿蒙开发-在JS中获取hml页面中Input输入的值
场景鸿蒙基于JS搭建HelloWorld并修改国际化文件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118274050 在 ...
js中获取元素的当前位置
js中获取当前位置有如下几种方法: event.offsetX, (IE属性,测试都可以使用) event.offsetY, (IE属性,测试都可以使用) event.clientX, e ...
JS中获取contextPath的方法
参考:https://hanzhdy.iteye.com/blog/2261832 https://blog.csdn.net/xb12369/article/details/46416845 在JS ...

在js中获取vue文件的style标签下的内容

前言：

解决方案：

在js中获取vue文件的style标签下的内容相关推荐

最新文章

热门文章