https://github.com/alienkevin/html-element-picker
Pick and highlight any HTML element on a page using only Vanilla JS (highly configurable)
https://github.com/alienkevin/html-element-picker
Last synced: 7 months ago
JSON representation
Pick and highlight any HTML element on a page using only Vanilla JS (highly configurable)
- Host: GitHub
- URL: https://github.com/alienkevin/html-element-picker
- Owner: AlienKevin
- License: mit
- Created: 2019-04-06T17:57:25.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-30T20:18:48.000Z (almost 3 years ago)
- Last Synced: 2024-11-10T10:06:57.996Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://alienkevin.github.io/html-element-picker/docs/index.html#html-element-picker
- Size: 572 KB
- Stars: 44
- Watchers: 1
- Forks: 10
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# html-element-picker
**Pick and highlight any HTML element on a page using only Vanilla JS. Hovered elements are automatically highlighted in the color you want. Tested in Chrome, Firefox, and Opera, does not work in IE.**
# Installation
## NPM
`npm install html-element-picker`
## CDN
Append the one of the following scripts at the end of `body` tag
**jsDelivr**
```html
```
**Unpkg**
```html
```
# Update
Because of the usual 24-hour cache by CDN providers, you should replace the @latest tag with @(the latest version number) for immediate update to the latest version. It's always the safest to use the current stable version @1.0.4.
# Support
See the [html-element-picker API documentation](https://alienkevin.github.io/html-element-picker/docs/index.html).
# Usage
After importing html-element-picker, instantiate the ElementPicker class with optional configurations.
```js
new ElementPicker(options);
```
The default configurations are
```js
{
container: document.body,
selectors: "*",
background: "rgba(153, 235, 255, 0.5)",
borderWidth: 5,
transition: "all 150ms ease",
ignoreElements: [document.body],
action: {}
}
```
## container (HTMLElement)
`container` is the boundary of the element picker. No highlights will be shown on mouse hover outside the container. Defaults to the document body.
## selectors (String)
`selectors` serve as the filter for the element picker. Only elements matching the CSS rule specified in the `selectors` string will be highlighted. Defaults to accepting all elements ("*", star operator).
## background (String)
`background` specifies the background color of the higlight when an element is hovered. You should always set a **transparent** color using `"rgba(...)"` or `"hsla(...)"` so as not to block the hovered element. Same as setting `elementPicker.hoverBox.style.background`. Defaults to light blue.
## borderWidth (Integer)
`borderWidth` indicates the width of the highlight box border (in **px**) that covers the hovered element. Pass in a positive value to enlarge the highlight box and a negative to decrease the size (smaller than the hovered element). Zero means no border or same size as the hovered element. Defaults to 5px.
## transition (String)
`transition` specifies the animation when the highlight box transfer to another hovered element. Same as setting `elementPicker.hoverBox.style.transition`. Pass in `""` (empty string) to disable transition. Defaults to `"all 150ms ease"`.
## ignoreElements (Array of HTMLElement)
`ignoreElements` lists the elements to **not** highlight when being hovered over. Add, remove, modify elements in this property same as a normal array (`push`, `pop`, etc). The order of elements does not matter. Defaults to the document body.
## action (Object with two properties)
`action` indicates a callback function to run when an event is triggered and **the target element is being picked up by the element picker**, meaning only elements that are accepted by the picker will trigger the callback. `trigger` is a `String` with possible event names such as `"click"`, `"dblclick"`, `"mouseover"`, etc. `callback` is a function given a `target` parameter when triggered which contains the hovered element. Sample `callback` functions are:
```js
(function (target) {
target.remove();
})
```
```js
(function (target) {
target.style.fontSize = "50px";
})
```
```js
(function (target) {
target.classList.toggle("highlight");
})
```
A full `action` option can look like:
```js
action: {
trigger: "click",
callback: (function (target) {
target.classList.toggle("highlight");
})
}
```
You must **surround the `callback` function with parentheses** just like Immediately Invoked Function Expressions (IIFEs). Defaults to no action (empty Object).
## Dynamic Update
All of the above options can be **dynamically** updated in Javascript at runtime. Element picker will respond immediately to any configuration change.