style one element with the native css of another

Question

I want to achieve a paragraph of text where some words are styled as <a> tags with the native styling of the browser.

These words might really be in an <a> tag with an href attribute to direct the user to another url, or they might be in a disguised <span> tag with a js onclick function.

How do I get the native style attributes of <a> tags and apply them to my <span> tags?

Answer 1

It's simple: You don't.

You can extend an element's properties with SASS and LESS but not the native ones from a certain tag. The easier way would be to give both elements the same css class and style them accordingly.

This shouldn't be a nightmare as <a> and <span> tags are quite similar in the way they behave in the page flow.

Answer 2

Get the value of the target attribute of an <a> element:

var x = document.getElementById("myAnchor").getAttribute("target");

Get the value of the onclick event attribute of a <button> element:

var x = document.getElementById("myBtn").getAttribute("onclick");

Find out if a <button> element has an onclick attribute:

var x = document.getElementById("myBtn").hasAttribute("onclick");

Get the <a> element with id="myAnchor"

var x = document.getElementById("myAnchor"); 

If the <a> element has a target attribute, set the value to "_self"

if (x.hasAttribute("target")) {      
    x.setAttribute("target", "_self");
}