截取网页局部区域css样式的方法和系统的制作方法

【技术领域】

[0001]本发明涉及计算机网络技术领域，特别是涉及一种截取网页局部区域CSS样式的方法和系统。

【背景技术】

[0002]CSS(Cascading Style Sheets，级联样式表)是一种计算机标记语言，其在标准网页设计中负责网页内容的表现。相对于传统HTML(Hyper text Markup Language，超文本标记语言)的表现而言，CSS能够对网页中各个显示对象的位置排版进行像素级的精确控制，支持几乎所有的字体、字号、样式，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言之一。在CSS发挥网页内容表现作用的过程中，由开发人员开发的CSS文件被存放在后端的网页服务器;该CSS文件进而在客户端可以由浏览器调用、加载并直接加以执行(无需编译)，从而将开发人员所需要表现的效果展示在浏览器中供用户浏览。

[0003]传统的做法中，开发人员如果想使用已有网站的某个元素的CSS内容，需要先打开浏览器自带的控制台，并让鼠标点击选中目标元素，然后再控制台中查看该元素所有CSS的内容，并对内容进行复制，拷贝到自己代码中。在查看不同元素的CSS时，一般需要重复进行如下操作:

[0004](1)点击控制面板中的元素选择按钮。

[0005](2)将鼠标移至目标元素上。

[0006](3)点击鼠标左键选中目标元素，在控制台中查看其全部CSS属性。

[0007]上述操作过程每看一个元素就要点击一次元素，操作步骤多，操作过程较为繁琐。

【发明内容】

[0008]基于此，有必要针对现有技术操作步骤多、过程繁琐的问题，提供一种截取网页局部区域CSS样式的方法和系统。

[0009]—种截取网页局部区域CSS样式的方法，包括以下步骤:

[0010]在接收到用户输入的监测指令时，监测输入设备在网页中的指示位置；

[0011]根据所述指示位置从网页中所有的html元素中确定用户需要复制的第一目标元素，并获取所述第一目标元素的引用；

[0012]遍历网页中所有的html元素的CSS规则对象，从所述CSS规则对象中查找第一目标元素的引用对应的cssRules对象；

[0013]从所述cssRules对象中获取第一目标元素的CSS样式键值对；

[0014]在接收到用户的复制指令时，复制所述CSS样式键值对。

[0015]—种截取网页局部区域CSS样式的系统，包括:

[0016]监测装置，用于在接收到用户输入的监测指令时，监测输入设备在网页中的指示位置；

[0017]第一获取装置，用于根据所述指示位置从网页中所有的html元素中确定用户需要复制的第一目标元素，并获取所述第一目标元素的引用；

[0018]查找装置，用于遍历网页中所有的html元素的CSS规则对象，从所述CSS规则对象中查找第一目标元素的引用对应的cssRules对象；

[0019]第二获取装置，用于从所述cssRules对象中获取第一目标元素的CSS样式键值对；

[0020]复制装置，用于在接收到用户的复制指令时，复制所述CSS样式键值对。

[0021]上述截取网页局部区域CSS样式的方法和系统，通过监测输入设备在网页中的指示位置;根据所述指示位置从网页中所有的html元素中确定用户需要复制的第一目标元素，并获取所述第一目标元素的引用;遍历网页中所有的html元素的CSS规则对象，从所述CSS规则对象中查找第一目标元素的引用对应的cssRules对象；从第一目标元素的cssRules对象中获取第一目标元素的CSS样式键值对，当用户需要使用现有网页中某个元素的CSS样式时，只需输入监测指令并将输入设备移动到相应目标元素的坐标范围内，就可以查看目标元素的CSS样式值;如果想要拷贝目标元素的CSS样式，只需输入复制指令，即可将CSS样式拷贝到系统粘贴板，减少了截取网页局部区域CSS样式时的操作步骤，方便了用户操作。

【附图说明】

[0022]图1为一个实施例的截取网页局部区域CSS样式的方法流程图；

[0023]图2为一个实施例的截取网页局部区域CSS样式的系统结构示意图。

【具体实施方式】

[0024]下面结合附图对本发明的技术方案做进一步阐述。

[0025]图1为一个实施例的截取网页局部区域CSS样式的方法流程图。如图1所示，本发明的截取网页局部区域CSS样式的方法可包括以下步骤:

[0026]S1，在接收到用户输入的监测指令时，监测输入设备在网页中的指示位置；

[0027]S2，根据所述指示位置从网页中所有的html元素中确定用户需要复制的第一目标元素，并获取所述第一目标元素的引用；

[0028]S3，遍历网页中所有的html元素的CSS规则对象，从所述CSS规则对象中查找第一目标元素的引用对应的cssRules对象；

[0029]S4，从所述cssRules对象中获取第一目标元素的CSS样式键值对；

[0030]S5，在接收到用户的复制指令时，复制所述CSS样式键值对。

[0031]其中，步骤S3可包括:

[0032]S31，获取网页中所有html元素的CSS规则对象；

[0033]S3 2，遍历所述CSS规则对象的属性，获取所述CSS规则对象的每个属性中的cssRules 对象；

[0034]S33，遍历所述cssRules对象，并将所述cssRules对象的每个属性中的selectorText属性与第一目标元素进行匹配;若匹配成功，则将所述cssRules对象设置为第一目标元素的cssRules对象。

[0035]本发明可安装在浏览器内核的插件中，例如，可安装在chrome浏览器内核的插件中。

[0036]在一个实施例中，所述监测指令可包括按住键盘上的特定键不放，例如按住ctrl键，也可包括按下特定按键的组合，例如ctrl+shift+Fl的组合等，还可包括点击在网页中设置的特定按钮。所述输入设备可包括鼠标、手写笔等。为方便叙述，下文以所述输入指令为按住c tr 1键，所述输入设备为鼠标为例。

[0037]当检测到用户按下ctrl键时，可为当前网页中所有的html元素注册一个监测鼠标经过事件的函数d i splayCs s，在用户放开c tr 1键时，所有元素取消对该事件的监测。当鼠标在网页中的坐标处于网页中第一 html元素的坐标范围之内时，可将所述第一 html元素设置为第一目标元素。

[0038]鼠标移动到所述第一目标元素上的时候，之前注册的displayCss函数开始执行，首先，该函数从传入该事件的event参数中获取该目标元素的引用，然后根据该引用获取该元素在网页中的坐标值1，7和尺寸(例如:长高》1(11:11，11618111:)。根据坐标值1，7和长高width, height生成一个绝对定位的div元素覆盖到目标元素的上面，并为所述div元素生成第一标识。所述第一标识可以是颜色标识。例如，可将所述div元素的颜色设置为蓝色半透明，用来显示所述第一目标元素的CSS键值对。还可为所述第一目标元素设置第二标识，用来标识所述第一目标元素。所述第二标识也可以是颜色标识，例如，可将所述第一目标元素的边框设置为红色。当鼠标从所述第一目标元素移动到第二目标元素上时，可清除所述div元素，并在所述第二目标元素上方重新生成div元素。然后调用getCss函数，并将获得的目标元素的弓I用传入所述ge tCs s函数。

[0039]getCss函数通过浏览器中的document.styleSheets属性获得页面中所有元素的所有的CSS规则对象，然后遍历该对象中的所有属性，获得每个属性中的cssRules对象，遍历该cssRules对象，并将cssRules对象的每个属性中的selectorText属性与目标元素做jquery的is运算(target.1s(selectorText))，如果返回true，贝表示当前的cssRules对象就是目标元素的规则，如果返回false，则一直将遍历走完，直到发现该目标元素的cssRules为止。找到对应的cssRules之后，获取该cssRules对象中的style属性的值，该值是一个键值对，包含该元素的所有CSS样式键值对，我们对其中的值进行空值过滤以及浏览器自带的CSS属性的过滤，最终返回该元素的有效CSS样式键值对。将返回的键值对序列化成字符串的形式显示在div元素上面。

[0040]在接收到用户的复制指令时，可复制所述CSS样式键值对。例如，可在按住ctrl键的同时点击鼠标左键，通过第三方ZeroClipboard库将getCss函数获得的键值对复制到系统的粘贴板。