Question

I want to use javascript to insert some elements into the current page. Such as this is the original document: <p>Hello world!</p>

Now I want to insert an element in to the text so that it will become:

<p>Hello <span id=span1>new</span> world!</p>

I need the span tag because I want to handle it later.Show or hide. But now problem comes out, if the original page has already defined a strange CSS style on all <span> tags, the ‘new’ I just inserted will not appear to be the same as ‘Hello’ and ‘world’. How can I avoid this? I want the ‘new’ be exactly the same as the ‘Hello’ and ‘world’.

Answer 1

Simply override any span styles. Set layout properties back to browser defaults and set formating to inherit from the parent:

span#yourSpan {   /* defaults */   position: static;   display: inline;   margin: 0;   padding: 0;   background: transparent;   border: none;    /* inherit from parent node */   font: inherit;   color: inherit;   text-decoration: inherit;   line-height: inherit;   letter-spacing: inherit;   text-transform: inherit;   white-space: inherit;   word-spacing: inherit; } 

This should be sufficient, although you may need to add !important if you are not using an id:

<span class='hello-node'>hello</span>  span.hello-node {   /* defaults */   position: static !important;   display: inline !important;   ... }