SPECCER

Appearance

@phun-ky/speccer / mark

Variable: mark ​

ts
const mark: {
  create: (id: string, n: string) => HTMLElement;
  element: (targetElement: HTMLElement) => Promise<void>;
};

Defined in: main.ts:192

This feature marks given element

pin

Type Declaration ​

create() ​

ts
create: (id: string, n: string) => (HTMLElement = markCreate);

Create a marker element with an optional element type.

Parameters ​

id ​

string

The id.

n ​

string = 'span'

The element type.

Returns ​

HTMLElement

  • The created marker element.

Example ​

typescript
const marker = create('div');
document.body.appendChild(marker);

element() ​

ts
element: (targetElement: HTMLElement) => (Promise<void> = markElement);

Create a marker element and add it to the body with styles matching a specified element.

mark

Parameters ​

targetElement ​

HTMLElement

The target element to match styles with.

Returns ​

Promise<void>

  • A promise that resolves after creating and styling the marker element.

Example ​

typescript
const targetElement = document.getElementById('target');
mark(targetElement);

Example ​

Use the following code, either for html or js:

html
<div data-speccer="mark" class="...">…</div>
ts
const targetElement = document.getElementById('target');
const options = {
  type: 'mark'
};

mark(targetElement, options);