Additional Attributes For Common HTML Elements – HacTags

Category: Javascript | March 8, 2024
Author:GhostShadow0316
Views Total:10 views
Official Page:Go to website
Last Update:March 8, 2024
License:MIT

Preview:

Additional Attributes For Common HTML Elements – HacTags

Description:

HacTags is a versatile JavaScript library that helps developers create dynamic and interactive elements without writing complex JavaScript and CSS codes.

It allows you to apply hover and click effects, text alterations, or dynamic styling options to elements by simply adding custom HTML attributes to them.

How to use it:

1. Download and include the hactags.js on your page.

<script src="hactags.js" defer></script>

2. Custom attributes for HOVER interactions.

<p hoverT="Hovered!">
  Change text to Hovered! on hover
</p>
<p hoverF="yellow">
  Change text color To YELLOW on hover
</p>
<p hoverB="green">
  Change background color to green on hover
</p>
<p hoverC="yellow green">
  Change text color & background color on hover
</p>
<p hoverA="alert('hovered!')">
  Execute a function on hover
</p>

3. Custom attributes for CLICK interactions.

<p clickT="clicked!">
  Change text to clicked! on click
</p>
<p clickF="yellow">
  Change text color To YELLOW on click
</p>
<p clickB="green">
  Change background color to green on click
</p>
<p clickC="yellow green">
  Change text color & background color on click
</p>
<p clickA="alert(clicked!)">
  Execute a function on click
</p>

4. Custom attributes for font styles.

<p B>BOLD</p>
<p I>italic</p>
<p SC>Small Caps</p>
<p UPPER>uppercase</p>
<p LOWER>LOWERCASE</p>
<p TITLE>Capitalize</p>

5. Custom attributes for underlines.

<p underline>Underline</p>
<p underline="green wavy 2px">2px green wavy underline</p>

6. Custom attributes for custom cursors.

<p cursor="pointer">Hover Me</p>
<p cursor="help">Hover Me</p>
<p cursor="crosshair">Hover Me</p>

You Might Be Interested In:


Leave a Reply