Overwrite CSS file after click handler

Question

A javascript library have a click handler.

When click a link like this:

<a id="login_id">Login</a>

a popup.css file is loading for a popup window with login informations.

How is it possible to change the css of that popup window? I cant edit the library. The problem is, that only when you click on it, the css file is loading and not before. A inline css will not work in that case, because the popup.css will overwrite it when use the click handler. I tried to work with css !important but it doestn work.

Is it possible to overwrite the CSS? A jsfiddle is not possible. Sorry.

Yes its a 3rd-party library. Sorry, I would but I cant post the link. — labu77, Apr 28 '15 at 13:15
I tried to work with css !important but it doestn work.@DontVoteMeDown Like I said, i really would like to post it but changing css is only payable feature. They dont reply and I have to make a css change to make the popup responsive. — labu77, Apr 28 '15 at 13:20
you can change the class in css of that popup window with javascript, but this method loading css before — icode03, Apr 28 '15 at 13:25

score 0 · Answer 1 · edited May 23 '17 at 11:44

Assuming you can target the stylesheet, you might be able to remove it using JavaScript. The example below removes all stylesheets using jQuery:

$('link[rel=stylesheet]').remove();

To target a specific url:

$('link[rel=stylesheet][href~="url.com"]').remove();

See: Removing or replacing a stylesheet (a <link>) with JavaScript/jQuery

See also: jQuery – enable/disable all style sheets on page on click

It's also possible that the popup content is being loaded from a third party through an iFrame. That would certainly explain why even !important doesn't override the styles.

Jim Buck · Answer 2 · 2015-04-28T13:44:55.903

I think you are missing the idea of CSS. Instead of trying to have a different sheet for a different element, you should use classes to determine which styles apply to which elements.

The C in CSS stands for cascading, which is precisely what the styles do depending on which rules the element matches.

A better approach would be to add/remove a class on the popup to change the style, instead of adding/removing stylesheets altogether.

Example:

$('#myPopUp').toggleClass('special-theme');

In this example it would add/remove the class special-theme, which would be used in a stylesheet like this:

#myPopUp {
  background-color: #f00;
}

#myPopUp.special-theme {
  background-color: #0f0;
}

If you can't edit the 3rd Party CSS, then another option is to copy the rules of it that you want to change. Then just load your custom stylesheet when the other one is loaded. That way it will override, as long as you follow the CSS Rules of Precedence.

Overwrite CSS file after click handler

2 Answers2