I am running in to this situation. Basically my site has many templates of css and users can change the color dynamically using jQuery. Now, the way I did it was to use jQuery to modify the css property directly by selecting the classes. However, if users switch to a different template (also dynamically), I insert .css file in but it has NO effect what so ever. The reason is the css change style=".." for each elements take precedent. How to fix this issue? I am thinking of 2 ways:
Delete the style="..." at each elememts. But how to do this?
Get the values directly from within .css file and assign to each elements again as style="..."
Anyone can show me some light on either one? Thanks.
If you just want to remove the style attribute from a group of elements you can use:
$('p').removeAttr('style');
Just replace 'p' with all the elements you want to remove the inline CSS from, e.g:
$('input, div, h1').removeAttr('style');
Hope this helps.
Before you switch out the style from the original using jQuery, why don't you assign the original style value to data on that element, and then restore it using that value.
So, for instance, say you're changing the css font-family of an element with class "foo":
To apply new css:
var orig = $(".foo").css('font-family');
$(".foo").data('origFont', orig);
$(".foo").css('font-family', 'Arial');
To revert the css:
var orig = $(".foo").data('origFont');
$(".foo").css('font-family', orig);
Get rid of all inline CSS using this regex in your editor:
style="[^"]*"
i just had the same problem, but i think the best solution is to use the jquery add and remove class.
each template should have a class, then to change it, use the remove class and add the desired class
Related
need a kind help from you:
I have this CSS and i want to change the word "ACTIVE" into another word after clicking on a button:
after clicking it should be:
example: body.new.content
My code is:
enter image description here
Could you please help me?
thanks.
Thank you for your answers, my issue is how to perform this:
When i click on the first press button (as you can see in the picture), it will open 2 pop-ups also the second button
enter image description here
enter image description here
This is my html code:
enter image description here
why you need to change css using javascript. It's not a correct way and can't do directly.
For example, if you have a need, try to remove active and add need class in your html content. Keep both type styles in your css. If still having exact need to modify, tell us denarii, let we think through and guide you. Thanks,
I don't think you can interfere in CSS with the way you described it.
you need to add a new class using classList.add("the name of the class you want to add") then append it to the parent div or for example the body with the append() or appendChild() methods then if you want you can style it using .style
I don't recommend you do this, because you'll run into some problems later in the development of your app.
Anyways I can give you a solution for that. Every DOM element has a lots of properties, one of them is classList which is an array of classes that the element has.
You can get it this way: body.classList
So, if you want to remove the class .active from your body you can use the remove() method like this: body.classList.remove('active'). Then if you want to add another class like .new you must use the add method like this: body.classList.add('new'). Make sure there is a 'new' class in css.
Can some one please explain to me what exactly is this jQuery call doing
$("header").removeClass("alternative full-width").addClass("full-width");
What exactly is it doing to the CSS file, Many Thanks
removeClass() function will remove the css selector applied to the element. In your case, if the header element has css attribute with value "alternative full-width", then those will be removed and it will add "full-width"
I also observe that, the above code has two values and you're trying to remove those two and add one of them.
Instead you could do this -
$("header").removeClass("alternative");
since you wish to add "full-width" which is already available!
NOTE I assume the .full-width css value is constant in that field. If it's not the case, we may have to use hasClass() to determine the existence!
For more info on removeClass - https://api.jquery.com/removeclass/
What exactly is it doing to the CSS file?
It has no effect on the CSS file
Can some one please explain to me what exactly is this jQuery call
doing
it remove the classes ( alternative and full-width )from the header with removeClass() and then it add the class ( full-width ) with addClass()
Header Element
$("header")
Select a header tag via JQuery
.removeClass("alternative full-width")
This method remove the "alternative full-width" class
.addClass("full-width")
This method add the "full-width" class.
As a matter of fact the JQuery it doesn't do anything in the CSS file.The only thing that is done with this example is to inherit the class properties that you have alredy define in the css file
Background,
There are some elements where CSS animations needs to be applied. However these CSS needs to be generated on the fly as calculation needs to be done from JavaScript code.
This question clarifies how to dynamically add a CSS. Now the question is, how do I remove or replace a CSS generated following the accepted answer?
Just to be clear, it's nothing to do with removing a class from element. I need to remove it from the page so that animations will stop from elements with class. At some time later I can alter the CSS and re-register class so that associated elements are animated in different way.
document.getElementById('someElementId').className = '';
Edit.
You can remove it from the element's class list
document.getElementById("myelementsid").classList.remove("classname");
Here you are full documentation to do it with jQuery
https://api.jquery.com/removeclass/
with this, you can remove one or more classes
If you want to remove the specific style from the page you can do it like the following snippet:
$('link[title=stylesheettitle]').prop('disabled',true);
OR
$('link[title="stylesheettitle"]').remove();
Java Script
var style = document.getElementById('styleID');
style.parentNode.removeChild(style );
Specifically, a class or id within the css.
Would you use something similar to $(window).height()?
It's not clear exactly what you want, but as a general rule all the styles applied to a given element can be accessed in JavaScript using something like:
element.style.<property-name>
So using native JavaScript you can do:
var elemStyles = document.getElementById("someId").style;
var styleWidth = elemStyles.width;
Assuming at least one element with a given CSS class and a framework that can select elements by class, you can similarly do:
var elemStyles = $(".someClass")[0].style;
var styleWidth = elemStyles.width;
Or depending upon what (if any) JavaScript framework you are using, there may be specialized methods that you can use to access/inspect various CSS attributes for a given element.
Note that any of these methods will bring back all the styles applied to the element, whether they are coming from the CSS file, from inline CSS declarations, or added programmatically by a script on the page. If you want to get just the styles inherited from the CSS file, then things get a bit trickier.
yes its possible
if you would like to receive other css properties check this out
http://api.jquery.com/css
you would do somethig like this
var cssvalue = $(selector).css(propertyName);
This will probably help you, too. Esp. if you want to do it without jQuery: How do you read CSS rule values with JavaScript?
I have a Javascript function when this returns a particular value I would like to change the colors of various table header using their id.
How can I change the colour of a table header in javascript I know how in CSS, or should I somehow conditionally call the CSS to do this?
Thanks,
Van
In your Javascript you'll want to change the class name of the table header in question.
This way you will keep your styles in you CSS and simply switch out the class name on the header, thus changing the style.
I suggest using the jQuery Javascript framework to make your life a lot easier and using its addClass() method.
Change the element class with another class defined in your CSS stylesheet.
document.getElementById('headerID').style.color = '#{color}';
See this Fiddle: http://jsfiddle.net/maniator/55Z8K/
You can easily manipulate CSS in Javascript. For example, this jQuery snippet changes the background colour of an element when condition 'x' is true:
if(x) $('#test').css('background-color', 'green');
… that's very simplistic of course: it would be far better to change the relevant element's class to something else, and define the various class styles in your CSS.
Based on the return of the function, you could add/remove a class from the element, causing its colors to change.
document.getElementById('FOO').className += 'new-class'
Alternatively, you can change the style of an element in JavaScript in the following way
document.getElementById('FOO').style = { color: '#FFF', backgroundColor: '#000' };
Refer to This reference on the JavaScript names of style options.