CN105468672A - 截取网页局部区域css样式的方法和系统 - Google Patents
截取网页局部区域css样式的方法和系统 Download PDFInfo
- Publication number
- CN105468672A CN105468672A CN201510772660.6A CN201510772660A CN105468672A CN 105468672 A CN105468672 A CN 105468672A CN 201510772660 A CN201510772660 A CN 201510772660A CN 105468672 A CN105468672 A CN 105468672A
- Authority
- CN
- China
- Prior art keywords
- css
- webpage
- cssrules
- object element
- rule objects
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 27
- 238000012544 monitoring process Methods 0.000 claims abstract description 21
- 238000001914 filtration Methods 0.000 claims description 4
- 238000012806 monitoring device Methods 0.000 claims description 3
- 230000006870 function Effects 0.000 description 7
- 238000010586 diagram Methods 0.000 description 4
- 230000008569 process Effects 0.000 description 4
- 230000008685 targeting Effects 0.000 description 3
- 230000000694 effects Effects 0.000 description 2
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明涉及一种截取网页局部区域CSS样式的方法和系统，其中，方法包括：在接收到用户输入的监测指令时，监测输入设备在网页中的指示位置；根据所述指示位置从网页中所有的html元素中确定用户需要复制的第一目标元素，并获取所述第一目标元素的引用；遍历网页中所有的html元素的CSS规则对象，从所述CSS规则对象中查找第一目标元素的引用对应的cssRules对象；从所述cssRules对象中获取第一目标元素的CSS样式键值对；在接收到用户的复制指令时，复制所述CSS样式键值对。所述截取网页局部区域CSS样式的方法和系统能够减少截取网页局部区域CSS样式时的操作步骤，方便用户操作。
Description
技术领域
本发明涉及计算机网络技术领域，特别是涉及一种截取网页局部区域CSS样式的方法和系统。
背景技术
CSS(CascadingStyleSheets，级联样式表)是一种计算机标记语言，其在标准网页设计中负责网页内容的表现。相对于传统HTML(HypertextMarkupLanguage，超文本标记语言)的表现而言，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规则对象；
S32，遍历所述CSS规则对象的属性，获取所述CSS规则对象的每个属性中的cssRules对象；
S33，遍历所述cssRules对象，并将所述cssRules对象的每个属性中的selectorText属性与第一目标元素进行匹配；若匹配成功，则将所述cssRules对象设置为第一目标元素的cssRules对象。
本发明可安装在浏览器内核的插件中，例如，可安装在chrome浏览器内核的插件中。
在一个实施例中，所述监测指令可包括按住键盘上的特定键不放，例如按住ctrl键，也可包括按下特定按键的组合，例如ctrl+shift+F1的组合等，还可包括点击在网页中设置的特定按钮。所述输入设备可包括鼠标、手写笔等。为方便叙述，下文以所述输入指令为按住ctrl键，所述输入设备为鼠标为例。
当检测到用户按下ctrl键时，可为当前网页中所有的html元素注册一个监测鼠标经过事件的函数displayCss，在用户放开ctrl键时，所有元素取消对该事件的监测。当鼠标在网页中的坐标处于网页中第一html元素的坐标范围之内时，可将所述第一html元素设置为第一目标元素。
鼠标移动到所述第一目标元素上的时候，之前注册的displayCss函数开始执行，首先，该函数从传入该事件的event参数中获取该目标元素的引用，然后根据该引用获取该元素在网页中的坐标值x,y和尺寸(例如：长高width,height)。根据坐标值x,y和长高width,height生成一个绝对定位的div元素覆盖到目标元素的上面，并为所述div元素生成第一标识。所述第一标识可以是颜色标识。例如，可将所述div元素的颜色设置为蓝色半透明，用来显示所述第一目标元素的CSS键值对。还可为所述第一目标元素设置第二标识，用来标识所述第一目标元素。所述第二标识也可以是颜色标识，例如，可将所述第一目标元素的边框设置为红色。当鼠标从所述第一目标元素移动到第二目标元素上时，可清除所述div元素，并在所述第二目标元素上方重新生成div元素。然后调用getCss函数，并将获得的目标元素的引用传入所述getCss函数。
getCss函数通过浏览器中的document.styleSheets属性获得页面中所有元素的所有的CSS规则对象，然后遍历该对象中的所有属性，获得每个属性中的cssRules对象，遍历该cssRules对象，并将cssRules对象的每个属性中的selectorText属性与目标元素做jquery的is运算(target.is(selectorText))，如果返回true，则表示当前的cssRules对象就是目标元素的规则，如果返回false，则一直将遍历走完，直到发现该目标元素的cssRules为止。找到对应的cssRules之后，获取该cssRules对象中的style属性的值，该值是一个键值对，包含该元素的所有CSS样式键值对，我们对其中的值进行空值过滤以及浏览器自带的CSS属性的过滤，最终返回该元素的有效CSS样式键值对。将返回的键值对序列化成字符串的形式显示在div元素上面。
在接收到用户的复制指令时，可复制所述CSS样式键值对。例如，可在按住ctrl键的同时点击鼠标左键，通过第三方ZeroClipboard库将getCss函数获得的键值对复制到系统的粘贴板。
本发明的截取网页局部区域CSS样式的方法，当用户需要使用现有网页中某个元素的CSS的样式时，只需输入监测指令并将输入设备移动到相应目标元素的坐标范围内，就可以在元素上方显示该元素的CSS样式值，如果想要拷贝目标元素的CSS样式，只需输入监测指令并输入复制指令，即可将CSS样式拷贝到系统粘贴板，减少了截取网页局部区域CSS样式时的操作步骤，方便了用户操作。
下面结合附图对本发明的截取网页局部区域CSS样式的系统的实施例做进一步描述。
图2为一个实施例的截取网页局部区域CSS样式的系统结构示意图。如图2所示，本发明的截取网页局部区域CSS样式的系统包括：
监测装置10，用于在接收到用户输入的监测指令时，监测输入设备在网页中的指示位置；
第一获取装置20，用于根据所述指示位置从网页中所有的html元素中确定用户需要复制的第一目标元素，并获取所述第一目标元素的引用；
查找装置30，用于遍历网页中所有的html元素的CSS规则对象，从所述CSS规则对象中查找第一目标元素的引用对应的cssRules对象；
第二获取装置40，用于从所述cssRules对象中获取第一目标元素的CSS样式键值对；
复制装置50，用于在接收到用户的复制指令时，复制所述CSS样式键值对。
其中，所述查找装置30包括：
第一获取单元301，用于获取网页中所有html元素的CSS规则对象；
第二获取单元302，用于遍历所述CSS规则对象的所有属性，获取所述CSS规则对象的每个属性中的cssRules对象；
设置单元303，用于遍历所述cssRules对象，并将所述cssRules对象的每个属性中的selectorText属性与第一目标元素进行匹配；若匹配成功，则将所述cssRules对象设置为第一目标元素的cssRules对象。
本发明的截取网页局部区域CSS样式的系统，当用户需要使用现有网页中某个元素的CSS的样式时，只需输入监测指令并将输入设备移动到相应目标元素的坐标范围内，就可以在元素上方显示该元素的CSS样式值，如果想要拷贝目标元素的CSS样式，只需输入监测指令并输入复制指令，即可将CSS样式拷贝到系统粘贴板，减少了截取网页局部区域CSS样式时的操作步骤，方便了用户操作。
本发明的截取网页局部区域CSS样式的系统与本发明的截取网页局部区域CSS样式的方法一一对应，在上述截取网页局部区域CSS样式的方法的实施例阐述的技术特征及其有益效果均适用于截取网页局部区域CSS样式的系统的实施例中，特此声明。
以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。
Claims (10)
1.一种截取网页局部区域CSS样式的方法，其特征在于，包括以下步骤：
在接收到用户输入的监测指令时，监测输入设备在网页中的指示位置；
根据所述指示位置从网页中所有的html元素中确定用户需要复制的第一目标元素，并获取所述第一目标元素的引用；
遍历网页中所有的html元素的CSS规则对象，从所述CSS规则对象中查找第一目标元素的引用对应的cssRules对象；
从所述cssRules对象中获取第一目标元素的CSS样式键值对；
在接收到用户的复制指令时，复制所述CSS样式键值对。
2.根据权利要求1所述的截取网页局部区域CSS样式的方法，其特征在于，根据所述指示位置从网页中所有的html元素中确定用户需要复制的第一目标元素的步骤包括：
为网页中所有的html元素注册第一函数；其中，所述第一函数用于判断所述输入设备的坐标是否处于相应html元素的坐标范围之内；
若所述输入设备的坐标处于第一html元素的坐标范围之内，则将所述第一html元素设置为第一目标元素。
3.根据权利要求1所述的截取网页局部区域CSS样式的方法，其特征在于，还包括以下步骤：
在接收到用户输入的取消监测指令时，取消监测输入设备在网页中的指示位置。
4.根据权利要求1所述的截取网页局部区域CSS样式的方法，其特征在于，在获取所述第一目标元素的引用之后，还包括以下步骤：
根据所述引用获取第一目标元素在网页中的坐标值和尺寸；
根据所述坐标值和尺寸生成绝对定位的div元素，并用所述div元素覆盖所述第一目标元素。
5.根据权利要求4所述的截取网页局部区域CSS样式的方法，其特征在于，还包括以下步骤：
为所述div元素设置显示所述第一目标元素的CSS键值对的第一标识；
为所述第一目标元素设置区分所述第一目标元素与网页中的其他html元素的第二标识；
根据所述第一标识与第二标识查看第一目标元素的CSS样式。
6.根据权利要求4所述的截取网页局部区域CSS样式的方法，其特征在于，还包括以下步骤：
当监测到输入设备移动到所述网页中的第二目标元素的坐标范围内时，清除所述div元素，并重新生成div元素覆盖所述第二目标元素；其中，所述第二目标元素为网页中所述第一目标元素之外的其他html元素。
7.根据权利要求1所述的截取网页局部区域CSS样式的方法，其特征在于，遍历网页中所有的html元素的CSS规则对象，从所述CSS规则对象中查找第一目标元素的引用对应的cssRules对象的步骤包括：
获取网页中所有html元素的CSS规则对象；
遍历所述CSS规则对象的属性，获取所述CSS规则对象的每个属性中的cssRules对象；
遍历所述cssRules对象，并将所述cssRules对象的每个属性中的selectorText属性与第一目标元素进行匹配；若匹配成功，则将所述cssRules对象设置为第一目标元素的cssRules对象。
8.根据权利要求1所述的截取网页局部区域CSS样式的方法，其特征在于，在从第一目标元素的cssRules对象中获取第一目标元素的CSS样式键值对的步骤之后，还包括：
对第一目标元素的CSS样式键值对的值进行空值过滤以及CSS属性的过滤，得到第一目标元素的有效CSS样式键值对。
9.一种截取网页局部区域CSS样式的系统，其特征在于，包括：
监测装置，用于在接收到用户输入的监测指令时，监测输入设备在网页中的指示位置；
第一获取装置，用于根据所述指示位置从网页中所有的html元素中确定用户需要复制的第一目标元素，并获取所述第一目标元素的引用；
查找装置，用于遍历网页中所有的html元素的CSS规则对象，从所述CSS规则对象中查找第一目标元素的引用对应的cssRules对象；
第二获取装置，用于从所述cssRules对象中获取第一目标元素的CSS样式键值对；
复制装置，用于在接收到用户的复制指令时，复制所述CSS样式键值对。
10.根据权利要求9所述的截取网页局部区域CSS样式的系统，其特征在于，所述查找装置包括：
第一获取单元，用于获取网页中所有html元素的CSS规则对象；
第二获取单元，用于遍历所述CSS规则对象的所有属性，获取所述CSS规则对象的每个属性中的cssRules对象；
设置单元，用于遍历所述cssRules对象，并将所述cssRules对象的每个属性中的selectorText属性与第一目标元素进行匹配；若匹配成功，则将所述cssRules对象设置为第一目标元素的cssRules对象。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510772660.6A CN105468672B (zh) | 2015-11-12 | 2015-11-12 | 截取网页局部区域css样式的方法和系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510772660.6A CN105468672B (zh) | 2015-11-12 | 2015-11-12 | 截取网页局部区域css样式的方法和系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN105468672A true CN105468672A (zh) | 2016-04-06 |
| CN105468672B CN105468672B (zh) | 2019-04-09 |
Family
ID=55606373
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510772660.6A Active CN105468672B (zh) | 2015-11-12 | 2015-11-12 | 截取网页局部区域css样式的方法和系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105468672B (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109325202A (zh) * | 2018-08-23 | 2019-02-12 | 阿里巴巴集团控股有限公司 | 网页元素处理及冗余网页样式查找方法和装置 |
| CN109814782A (zh) * | 2018-11-22 | 2019-05-28 | 北京金山云网络技术有限公司 | 图片切换方法、装置和终端设备 |
| CN109948075A (zh) * | 2017-09-25 | 2019-06-28 | 北京国双科技有限公司 | 网页数据的标记方法及装置 |
| US11514121B2 (en) | 2020-08-10 | 2022-11-29 | International Business Machines Corporation | Webpage customization |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8413061B2 (en) * | 2008-08-05 | 2013-04-02 | Accenture Global Services Limited | Synchronous to asynchronous web page conversion |
| CN103870558A (zh) * | 2012-03-29 | 2014-06-18 | 北京奇虎科技有限公司 | 页面渲染方法和遮罩层创建方法 |
| CN104156445A (zh) * | 2014-08-14 | 2014-11-19 | 北京京东尚科信息技术有限公司 | 自动化测试脚本编辑中获取页面元素的方法及系统 |
-
2015
- 2015-11-12 CN CN201510772660.6A patent/CN105468672B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8413061B2 (en) * | 2008-08-05 | 2013-04-02 | Accenture Global Services Limited | Synchronous to asynchronous web page conversion |
| CN103870558A (zh) * | 2012-03-29 | 2014-06-18 | 北京奇虎科技有限公司 | 页面渲染方法和遮罩层创建方法 |
| CN104156445A (zh) * | 2014-08-14 | 2014-11-19 | 北京京东尚科信息技术有限公司 | 自动化测试脚本编辑中获取页面元素的方法及系统 |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109948075A (zh) * | 2017-09-25 | 2019-06-28 | 北京国双科技有限公司 | 网页数据的标记方法及装置 |
| CN109325202A (zh) * | 2018-08-23 | 2019-02-12 | 阿里巴巴集团控股有限公司 | 网页元素处理及冗余网页样式查找方法和装置 |
| CN109814782A (zh) * | 2018-11-22 | 2019-05-28 | 北京金山云网络技术有限公司 | 图片切换方法、装置和终端设备 |
| US11514121B2 (en) | 2020-08-10 | 2022-11-29 | International Business Machines Corporation | Webpage customization |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105468672B (zh) | 2019-04-09 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9697183B2 (en) | Client side page processing | |
| US10120954B2 (en) | Transformation and presentation of on-demand native application crawling results | |
| Gupta | Kibana essentials | |
| US8375356B2 (en) | Tabular completion lists | |
| WO2018082462A1 (zh) | 应用界面遍历方法、系统和测试设备 | |
| CN104657451B (zh) | 页面的处理方法及装置 | |
| Zeleny et al. | Box clustering segmentation: A new method for vision-based web page preprocessing | |
| US20210073463A1 (en) | Human-computer interaction method and apparatus thereof | |
| CN104216600B (zh) | 一种提供应用程序的功能的方法及触屏智能终端设备 | |
| CN108108194B (zh) | 用户界面编辑方法以及用户界面编辑器 | |
| CN105468672A (zh) | 截取网页局部区域css样式的方法和系统 | |
| US10572566B2 (en) | Image quality independent searching of screenshots of web content | |
| WO2012141183A1 (ja) | 多様な端末機器に対応するコンテンツ提供装置 | |
| CN108319687B (zh) | 一种基于js拖拽技术的sql规则生成器 | |
| CN106844635A (zh) | 网页中的元素的编辑方法及装置 | |
| CN106886547A (zh) | 一种脚本生成方法与装置 | |
| WO2015043352A1 (en) | Method and apparatus for selecting test nodes on webpages | |
| CN106874502A (zh) | 一种视频搜索的方法、装置及终端 | |
| US10242139B2 (en) | Scheme and design markup language for interoperability of electronic design application tool and browser | |
| US20160070794A1 (en) | Method and system for masking and filtering web contents and computer program product | |
| CN106156109A (zh) | 一种搜索方法及装置 | |
| CN107145494A (zh) | 一种浏览网页中缩略图的方法及装置 | |
| CN103530041A (zh) | 一种拖拽处理方法、装置和终端设备 | |
| Prakash et al. | Content extraction issues in online web education | |
| CN110929100B (zh) | 获取取值路径的方法、装置、存储介质和电子设备 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |