3

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?

grateful
  • 1,128
  • 13
  • 25
  • Couldn't you just omit the `href` or leave it blank? – 4castle Jun 01 '16 at 15:54
  • In some browsers, that removes the underlining and the color change of the tag once it's been visited – grateful Jun 01 '16 at 15:55
  • 1
    There is NO CSS method of 'copying' styles...why not define how they look in a class and apply that to links/spans whatever. – Paulie_D Jun 01 '16 at 15:57
  • @ Paulie_D I could, but I would prefer to leave the native styling. I think there are other cases, like buttons for example, where the cloning of native styles could be useful. – grateful Jun 01 '16 at 15:59
  • how is an a tag natively styled any different than a span tag, other than the link underlining which you wish to keep? – chiliNUT Jun 01 '16 at 16:02
  • The only native style that would apply to the anchor and not a span would be the color, text-decoration and pointer style wouldn't it? – Paulie_D Jun 01 '16 at 16:03
  • Why would you want to use the native browser styling? This isn't always consistent across other browsers (seeing as how it's the browser that's defining these), and in my experience, it basically always looks ugly. I'd recommend just using multiple selectors: `a, span.fakelink { }`. – TARDIS Maker Jun 01 '16 at 16:05
  • The example in the question refers to anchor tags which, as Paulie_D has commented have little to differentiate them from span tags. I know I can put 'a's and 'spans' in a class and style them the same. However, I am interested to find a solution that could also be applied to other elements too. I think it could be especially useful for button or select tags for example. – grateful Jun 01 '16 at 16:13

2 Answers2

2

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.

André Ramos
  • 101
  • 1
  • 7
  • I don't like to accept anything as impossible. Perhaps you are correct, but I'd like to do more research and see if there are any more responses before accepting this answer. For example, I have found that updated User Agent Stylesheets are available on GitHub here: [link](http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements/6867287#6867287#answer-22510220) – grateful Jun 01 '16 at 17:38
-1

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");
}
Atanu
  • 21
  • 8