Remove CSS style rules from a single HTML element programatically

Question

I want to add some HTML elements in my document that has no style at all. But I need to assure that these elements will not look differently regardless of project, webpage or anything else really. These elements will be inserted in the page by Javascript and will be SPAN.

My idea is to add SPANs to style snippets of text in the document. But some style might have been added to SPAN elements before and that will change the result I am expecting.

So let's assume I'm writing a Widget and any of you could be using it in your own webpages. This is why I can't do much to change the elements' style directly, like changing the stylesheets directly. The solution must be achieved by Javascript. JQuery is not wanted.

<head>
   <style>
     span{
       font-weight: bold;
       /*anything else goes below*/
     }
   </style>
</head>

<body>
   <span class='a_regular_span'>This text must be bold and anything else</span>
   <span>This text must have only the CSS rules I applied by Javascript, and must not inherit the rules for all SPANs in the page</span>
</body>

Any ideas?

score 2 · Answer 1 · edited May 23 '17 at 11:49

2

So let's assume I'm writing a Widget and any of you could be using it in your own webpages. This is why I can't do much to change the elements' style directly

You could use a style element with scoped attribute. This way you can style only your elements, without affecting other parts of the page.

But be aware that old browsers don't support it.

And if you don't want page's styles to affect your elements, see How can I prevent CSS from affecting certain element?

edited May 23 '17 at 11:49

Community

1
1

answered Nov 28 '13 at 20:12

Oriol

274,082
63
437
513

While the scoped method can ignore other CSS styles. Inserting the span at the wrong place will mess up the style of other span. – Thanh Trung Nov 28 '13 at 20:20
yea I think i'll need a more general solution but what I understood from reading the description of `scoped`, is that the other elements will not inherit those rules. I need other rules to not be inherited by specific elements. – Victor Ferreira Nov 28 '13 at 20:25
@VictorFerreira Then, see the question I made some thime ago: [How can I prevent CSS from affecting certain element?](http://stackoverflow.com/questions/17407424/how-can-i-prevent-css-from-affecting-certain-element) – Oriol Nov 28 '13 at 20:29
The style block with the scoped attribute will overwrite the global styles generally found in the head (whether in a style block or linked stylesheet), but only on the `sibling/descendent elements inside the same parent`. Using scoped styles without a proper polyfill is dangerous. In a browser that doesn't support them, the styles you declare will `affect the entire page`. Source: http://css-tricks.com/saving-the-day-with-scoped-css/ – Thanh Trung Nov 28 '13 at 20:33
@ThanhTrung Yeah, that's why I warned that old browsers don't support it. – Oriol Nov 29 '13 at 21:41

score 2 · Answer 2 · answered Nov 28 '13 at 20:26

2

If you really wish to separate the style of your elements from that of the other elements on the page, you could use a custom tag to do this.

For example, instead of using span, you could use customspan and style those elements any way you like.

<head>
   <style>
     span{
       font-weight: bold;
       /*anything else goes below*/
     }
   </style>
</head>

<body>
   <span class='a_regular_span'>This text must be bold and anything else</span>
   <customspan>This text must have only the CSS rules I applied by Javascript, and must not inherit the rules for all SPANs in the page</customspan>
</body>

answered Nov 28 '13 at 20:26

xcopy

2,248
18
24

hmmm sounds good to me. the code will not be valid, right?! but that's a nice step – Victor Ferreira Nov 28 '13 at 20:30
The tag isn't valid but still rendered by the browsers. If you insist on using a span tag, then there is no perfect solution. Within the same site/domain, any common tag can still be modified by javascript even if it's inside an iframe – Thanh Trung Nov 28 '13 at 21:02

score 0 · Answer 3 · edited Nov 28 '13 at 20:42

0

can u try this?

 <style>
      span{
        font-weight: bold;
        /*anything else goes below*/
      }    .a_regular_span span{ font-weight: normal;
        /*anything else goes below*/
     }

 </style>

edited Nov 28 '13 at 20:42

Robin Green

32,079
16
104
187

answered Nov 28 '13 at 20:11

Xarxas

97
2
11

Remove CSS style rules from a single HTML element programatically

3 Answers3