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 );
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.
I'm having issues with my noggin... Please help me answer this question:
is it possible to add a single letter to a string in css? (i would assume that it is by storing the original string and adding a letter at a specific position)
Here is my code:
.u_usa{
background-image: url(../images/icons/usa_24.png);
}
What I am looking to do is onclick change the css property to:
.u_usa{
background-image: url(../images/icons/usa_24t.png);
}
then when clicked, change it back (removing the "t")...
the issue is that i have SEVERAL different classes that I want to use the same function on, each having a different location for the background image. The thing that stays the same is that one image has a t and one doesnt...
i need one function that, no matter what class im changing, is able to simply change one letter in the css property (whatever class is calling the function)
thank you in advance, If you couldnt tell by my jibberish posting, I have been working on these issues for a while and have fixed just about everything but this one item.
Thank you again...
edit:
what i am trying to achieve is creating a function that when run does a css switch, but is dynamic as to whatever class is running it. i have 60+ different divs that have backgrounds, when clicked i want to add or remove a "t" from the 4th to last character position of the css background image url.
You should add a second CSS rule for each class with a dual-class selector, e.g.:
.u_usa {
background-image: url(../images/icons/usa_24.png);
}
.u_usa.clicked {
background-image: url(../images/icons/usa_24t.png);
}
and then in your onclick event handler, add or remove the clicked class from the appropriate elements.
There are a number of approaches:
Toggle Classes
Have one background image specified by one class and a different background image by another class. Find all the elements with one class, loop over them, remove one class and add the other. It's reasonably quick for say less than 100 elements with the same class but might be slow where there are more.
Select elements based on background image and change it
Very slow and compute intensive, ok for a small number of elements but that's it.
Change the style rule
Find the style rule in the appropriate style sheet and change the value of the background-image property. It's more code (if you have to write the function from scratch, but I'm sure you can find a suitable function and add it to your code collection). It's very fast, regardless of how many elements you need to modify. The only drawback is that it will change every element with the class, you can't except some based on logic like you can with the toggle method.
Your choice.
we can use addClass function in JQuery to do that when click on a button.course we can not do that without javascript
Firstly you can make the style inline instead of a class.
Then use the code snippets below
from normal to 't' image
var img = document.getElementsByClassName('className')[0].style.backgroundImage;
img = img.replace('.png','t.png');
document.getElementsByClassName('className')[0].style.backgroundImage = img;
and reverse
var img = document.getElementsByClassName('className')[0].style.backgroundImage;
img = img.replace('t.png','.png');
document.getElementsByClassName('className')[0].style.backgroundImage = img;
Or
Make two different classes and change the class everytime you need to change the background-image
document.getElementsByClassName('className')[0].setAttribute('class','newClassName');
That's not possible with CSS I'm afraid. You'll have to use javascript, or more likely a library such as jQuery to create that functionality.
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.
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