Modify more than 1 css file with javascript

StackOverflow https://stackoverflow.com/questions/21491780

Question

I'm trying to find a way for modify CSS while HTML is running, so far I find that is possible just with a little script like this next...

$("button").click(function(){
  $("p").css("color","red");
});

As I can concern this is an effective way to modify the local CSS stylesheet refered to our HTML while webpage is running (i.e. pushing a div button).

What I'm trying to do is modify an specific .class from CSS stylesheet of an jQuery plugin for replacing the standard right-click context menu.

I didn't found any way in JS to call an specific stylesheet for modify any .class or #id

So my HTML had the following definitions:

<script src="jquery.contextmenu.js"></script>
<link rel="stylesheet" href="jquery.contextmenu.css">
<link rel="stylesheet" href="localstyle.css">

But when I try to update custom jQuery CSS with a script like this

  $('#red').click(function(){
    $('.contextMenuPlugin').css({'background-color': 'white'});

.contextMenuPlugin (native in jquery.contextmenu.css) isn't recognized, that script only work with a .class or a #id from my own stylesheet (localstyle.css).

I try things like using my local CSS embedded in HTML, and referencing jQuery CSS with an id but still nothing change. So there's the link of Github repo from jQuery plugin:

https://github.com/joewalnes/jquery-simple-context-menu

I try to make a live but JSfiddle dosn't work at all with this proyect, so if it helps or anyone want to check it, there's an pastebin of issue:

http://pastebin.com/u/27GRiS (4 files)

I hope someone help me clarify this, thanks in advance, Federico.

Was it helpful?

Solution 2

You should rethink your solution. Instead, add an additional class to your stylesheet that has the CSS changes you want.

Then, on clicking the button you can call addClass to add it to the appropriate elements.

OTHER TIPS

The problem is that you think that

$('.contextMenuPlugin').css({'background-color': 'white'});

creates a stylesheet with

.contextMenuPlugin { background-color: white }

But it's not like this.

$('.contextMenuPlugin') gets all elements with class contextMenuPlugin in the moment you use it, and then, .css({'background-color': 'white'}) modifies the inline style of each element.

That means, if you create new elements with class contextMenuPlugin after that code, they won't be affected.

Then, you can:

  • Make sure that your target element exists when you use the code
  • Create a stylesheet with the desired CSS

Some time ago, I created a function which adds desired rules to an stylesheet, and allows you to reference and change/delete them. You can see it in this answer.

Take your <script> code out of the <head> and put it at the end of the <body>.

Also you don't need this:

$(function() { ... })

if you already have this:

$(document).ready(function() { ... })

In other words, remove line 29 and line 27 (the $(function() { and });) from this file

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top