截取网页局部区域CSS样式的方法和系统技术方案

本发明专利技术涉及一种截取网页局部区域CSS样式的方法和系统，其中，方法包括：在接收到用户输入的监测指令时，监测输入设备在网页中的指示位置；根据所述指示位置从网页中所有的html元素中确定用户需要复制的第一目标元素，并获取所述第一目标元素的引用；遍历网页中所有的html元素的CSS规则对象，从所述CSS规则对象中查找第一目标元素的引用对应的cssRules对象；从所述cssRules对象中获取第一目标元素的CSS样式键值对；在接收到用户的复制指令时，复制所述CSS样式键值对。所述截取网页局部区域CSS样式的方法和系统能够减少截取网页局部区域CSS样式时的操作步骤，方便用户操作。

【技术实现步骤摘要】

本专利技术涉及计算机网络
，特别是涉及一种截取网页局部区域CSS样式的方法和系统。
技术介绍
CSS(Cascading Style Sheets，级联样式表)是一种计算机标记语言，其在标准网页设计中负责网页内容的表现。相对于传统HTML(Hyper text Markup Language，超文本标记语言)的表现而言，CSS能够对网页中各个显示对象的位置排版进行像素级的精确控制，支持几乎所有的字体、字号、样式，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言之一。在CSS发挥网页内容表现作用的过程中，由开发人员开发的CSS文件被存放在后端的网页服务器;该CSS文件进而在客户端可以由浏览器调用、加载并直接加以执行(无需编译)，从而将开发人员所需要表现的效果展示在浏览器中供用户浏览。传统的做法中，开发人员如果想使用已有网站的某个元素的CSS内容，需要先打开浏览器自带的控制台，并让鼠标点击选中目标元素，然后再控制台中查看该元素所有CSS的内容，并对内容进行复制，拷贝到自己代码中。在查看不同元素的CSS时，一般需要重复进行如下操作:(1)点击控制面板中的元素选择按钮。(2)将鼠标移至目标元素上。(3)点击鼠标左键选中目标元素，在控制台中查看其全部CSS属性。上述操作过程每看一个元素就要点击一次元素，操作步骤多，操作过程较为繁琐。
技术实现思路
基于此，有必要针对现有技术操作步骤多、过程繁琐的问题，提供一种截取网页局部区域CSS样式的方法和系统。—种截取网页局部区域CSS样式的方法，包括以下步骤:在接收到用户输入的监测指令时，监测输入设备在网页中的指示位置；根据所述指示位置从网页中所有的html元素中确定用户需要复制的第一目标元素，并获取所述第一目标元素的引用；遍历网页中所有的html元素的CSS规则对象，从所述CSS规则对象中查找第一目标元素的引用对应的cssRules对象；从所述cssRules对象中获取第一目标元素的CSS样式键值对；在接收到用户的复制指令时，复制所述CSS样式键值对。—种截取网页局部区域CSS样式的系统，包括:监测装置，用于在接收到用户输入的监测指令时，监测输入设备在网页中的指示位置；第一获取装置，用于根据所述指示位置从网页中所有的html元素中确定用户需要复制的第一目标元素，并获取所述第一目标元素的引用；查找装置，用于遍历网页中所有的html元素的CSS规则对象，从所述CSS规则对象中查找第一目标元素的引用对应的cssRules对象；第二获取装置，用于从所述cssRules对象中获取第一目标元素的CSS样式键值对；复制装置，用于在接收到用户的复制指令时，复制所述CSS样式键值对。上述截取网页局部区域CSS样式的方法和系统，通过监测输入设备在网页中的指示位置;根据所述指示位置从网页中所有的html元素中确定用户需要复制的第一目标元素，并获取所述第一目标元素的引用;遍历网页中所有的html元素的CSS规则对象，从所述CSS规则对象中查找第一目标元素的引用对应的cssRules对象；从第一目标元素的cssRules对象中获取第一目标元素的CSS样式键值对，当用户需要使用现有网页中某个元素的CSS样式时，只需输入监测指令并将输入设备移动到相应目标元素的坐标范围内，就可以查看目标元素的CSS样式值;如果想要拷贝目标元素的CSS样式，只需输入复制指令，即可将CSS样式拷贝到系统粘贴板，减少了截取网页局部区域CSS样式时的操作步骤，方便了用户操作。【附图说明】图1为一个实施例的截取网页局部区域CSS样式的方法流程图；图2为一个实施例的截取网页局部区域CSS样式的系统结构示意图。【具体实施方式】下面结合附图对本专利技术的技术方案做进一步阐述。图1为一个实施例的截取网页局部区域CSS样式的方法流程图。如图1所示，本专利技术的截取网页局部区域CSS样式的方法可包括以下步骤:S1，在接收到用户输入的监测指令时，监测输入设备在网页中的指示位置；S2，根据所述指示位置从网页中所有的html元素中确定用户需要复制的第一目标元素，并获取所述第一目标元素的引用；S3，遍历网页中所有的html元素的CSS规则对象，从所述CSS规则对象中查找第一目标元素的引用对应的cssRules对象；S4，从所述cssRules对象中获取第一目标元素的CSS样式键值对；S5，在接收到用户的复制指令时，复制所述CSS样式键值对。其中，步骤S3可包括:S31，获取网页中所有html元素的CSS规则对象；S3 2，遍历所述CSS规则对象的属性，获取所述CSS规则对象的每个属性中的cssRules 对象；S33，遍历所述cssRules对象，并将所述cssRules对象的每个属性中的selectorText属性与第一目标元素进行匹配;若匹配成功，则将所述cssRules对象设置为第一目标元素的cssRules对象。本专利技术可安装在浏览器内核的插件中，例如，可安装在chrome浏览器内核的插件中。在一个实施例中，所述监测指令可包括按住键盘上的特定键不放，例如按住ctrl键，也可包括按下特定按键的组合，例如ctrl+shift+Fl的组合等，还可包括点击在网页中设置的特定按钮。所述输入设备可包括鼠标、手写笔等。为方便叙述，下文以所述输入指令为按住c tr 1键，所述输入设备为鼠标为例。当检测到用户按下ctrl键时，可为当前网页中所有的html元素注册一个监测鼠标经过事件的函数d i splayCs s，在用户放开c tr 1键时，所有元素取消对该事件的监测。当鼠标在网页中的坐标处于网页中第一 html元素的坐标范围之内时，可将所述第一 html元素设置为第一目标元素。鼠标移动到所述第一目标元素上的时候，之前注册的displayCss函数开始执行，首先，该函数从传入该事件的event参数中获取该目标元素的引用，然后根据该引用获取该元素在网页中的坐标值1，7和尺寸(例如:长高》1(11:11，11618111:)。根据坐标值1，7和长高width, height生成一个绝对定位的div元素覆盖到目标元素的上面，并为所述div元素生成第一标识。所述第一标识可以是颜色标识。例如，可将所述div元素的颜色设置为蓝色半透明，用来显示所述第一目标元素的CSS键值对。还可为所述第一目标元素设置第二标识，用来标识所述第一目标元素。所述第二标识也可以是颜色标识，例如，可将所述第一目标元素的边框设置为红色。当鼠标从所述第一目标元素移动到第二目标元素上时，可清除所述div元素，并在所述第二目标元素上方重新生成div元素。然后调用getCss函数，并将获得的目标元素的弓I用传入所述ge tCs s函数。getCss函数通过浏览器中的document.styleSheets属性获得页面中所有元素的所有的CSS规则对象，然后遍历该对象中的所有属性，获得每个属性中的cssRules对象，遍历该cssRules对象，并将cssRules对象的每个属性中的selectorText属性与目标元素做jquery的is运算(target.1s(selectorText))，如果返回true，贝表示当前的cssRules对象就是目标元素的规则，如果返回fal本文档来自技高网...

【技术保护点】
一种截取网页局部区域CSS样式的方法，其特征在于，包括以下步骤：在接收到用户输入的监测指令时，监测输入设备在网页中的指示位置；根据所述指示位置从网页中所有的html元素中确定用户需要复制的第一目标元素，并获取所述第一目标元素的引用；遍历网页中所有的html元素的CSS规则对象，从所述CSS规则对象中查找第一目标元素的引用对应的cssRules对象；从所述cssRules对象中获取第一目标元素的CSS样式键值对；在接收到用户的复制指令时，复制所述CSS样式键值对。

【技术特征摘要】

【专利技术属性】
技术研发人员：潘潇，
申请(专利权)人：广州视睿电子科技有限公司，
类型：发明
国别省市：广东;44