It's clear that the question at hand is more complex than it initially appears. I'm not just looking for a way to apply a CSS class to a DOM element, as I'm already familiar with that (
<div class="MyCssCLass"></div>My goal is to apply specific parts of the CSS attributes from a class to a DOM element.
Let's say I have the following CSS:
.MyClass
{
background-color:red;
color:blue;
}
and this HTML
<div id="MyDiv">Some text</div>
If I want to only apply the background-color to MyDiv, I can't simply do:
<div id="MyDiv" class="MyClass">Some text</div>
Because this will also apply the CSS color attribute to MyDiv, which is not the desired outcome.
At this point, you may be wondering why not just override the CSS class with my own CSS or create another class like MyBckgrdClr with just background-color:red; and assign it to MyDiv?
However, life is not always that simple.
With my understanding, I attempted a solution using JQuery:
I dynamically created another <div> and assigned it the MyClass CSS class.
var MyClassElement = $('<div id="MyClassElement">').addClass('MyClass');
Then I inserted it into the body
$('body').append(MyClassElement);
Next, I tried to change the background of MyDiv
$("#MyDiv").css("background", MyClassElement.css("background"));
While this worked well in Chrome, it did not function properly in Mozilla, IE, Opera...
But fear not! I still have some tricks up my sleeve. Let's explore another approach!
What if I try a JavaScript solution?
My initial thought led me to this line of code:
document.getElementById('MyDiv').style.background = document.getElementById('MyClassElement').style.background;
Unfortunately, this did not work as expected. Even Chrome failed to display the background properly...
So, what should I do now...
... ...
Hmm...
... ... ... ...
Ah! I remember now! I'll resort to a method not commonly used these days. Ah yes, debugging.
Let's see what
document.getElementById('MyClassElement').style.backgroundSo I added:
console.log(document.getElementById('MyClassElement').style.background);
right after the
$('body').append(MyClassElement);(an empty string)
...
It seems my wisdom is diminishing rapidly.
Is there someone wiser than me who can point out my error and provide a solution to achieve this?
Specifically, I would like to understand
Why did the JQuery solution work in Chrome but not in other browsers? And why did JavaScript fail across all browsers?
Fiddle: jsfiddle.net/7h2Lsxmx/3/
P.S. I also noticed that CSS attributes in .MyClass do not seem to affect any of the .style attributes of a JavaScript DOM Element, nor do they work with .css() for the JQuery counterpart.
EDIT:
Here is some additional context.
I have 5 CSS files.
dark.css, light.css, gray.css, blueish.css, kindOfGreen.css
They all contain the same classes but with different values for each attribute.
For example, dark.css may include:
.MyClass
{
background-color:black;
color:gray;
}
and Blueish.css may have:
.MyClass
{
background-color:(Put rgb for dark blue here);
color:blue;
}
By switching between these CSS files at runtime using PHP, I can change the color scheme of my page.
Thus, the goal is to:
1- Allow the user to choose a theme 2- Store the theme choice in a cookie 3- Reload the page with the appropriate CSS file
Given this dynamic nature, I cannot (@Matthias I won't) manually code a class for every property that changes in each of the five CSS files. If I can make the code work in at least Mozilla and IE without altering the class (which is used on other elements too), that would be ideal.