how to toggle text color? - javascript

I need to toggle text color from red to green and vice versa.
<div id="logoup">DEEP</div>
<button id='btn'>CLICK</button>
CSS
#logoup{
color:red;
}
.greened{
color:green;
}
JS
$("#btn").click(function(){
$('#logoup').toggleClass('greened');
});
Doesn't work. Console is empty.
jsfiddle

In CSS, an id's defined styles take precedence over an class's defined styles. You can simply attached the class name to the id to fix this without the the need to use !important which should only be used as a last resort:
JS Fiddle
#logoup.greened {
color: green;
}

You could use important on green, or you could control the coloring using classes, instead of applying it to the element.
Method 1: Use important! on the greened class
$("#btn").click(function() {
$('#logoup').toggleClass('greened');
});
#logoup {
color: red;
}
.greened {
color: green !important;
}
<div id="logoup">DEEP</div>
<button id='btn'>CLICK</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Method 2: Don't apply color to ID, use classes
$("#btn").click(function() {
$('#logoup').toggleClass('red green');
});
.red {
color: red;
}
.green {
color: green;
}
<div id="logoup" class="red">DEEP</div>
<button id='btn'>CLICK</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

id occupy highers css specificity than class . So class wont be able to over rules the styles set by the id.
Following changes will work
CSS
.logoup{ // id changed to class
color:red;
}
.greened{
color:green;
}
HTML
<div id="logoup" class="logoup">DEEP</div>
<button id='btn'>CLICK</button>
JSFIDDLE

When you use id instead of class you must remember about css rules prioritization. The style that has the highest CSS specificity is applied. The specificity of different elements is defined as follows:
ID attribute = 100
Class attribute = 10
Element = 1
To check this rewrite your css:
#logoup{
color:red;
}
.greened{
color:green!important;
}
Read about css rule priorities.

Selector Priority. Override it using !important;
$("#btn").click(function() {
$('#logoup').toggleClass('greened');
});
.greened {
color: green !important;
}
#logoup {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logoup">DEEP</div>
<button id='btn'>CLICK</button>

Related

How to toggle button to change header to different color and back to original

I want to change the header to yellow to blue and then back to yellow on clicking button in jQuery
$("#title2-button").click(function(){
if ($("#title2").css("color", "yellow")) {
$("#title2").removeClass("yellow");
$("#title2").addClass("blue");
} else {
$("#title2").css("color", "yellow");
}
});
#title2{
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 id ="title2"> Weekends and Holidays Included</h2>
<button id="title2-button">Alter Second title</button>
You can use .toggleClass() like below.
This code basically:
When the button is clicked, it "toggles" the class blue. This means that if #title2 has the class of blue, it removes it. If it doesn't have the class, it adds it. The !important is there to make sure that the class blue overrides the previous color of yellow.
Since the default color is yellow, if toggleClass removes the class, the color goes back to yellow. If it adds the class, then the color goes to blue (since !important is there, the color would be blue instead of yellow).
$("#title2-button").click(function() {
$("#title2").toggleClass("blue");
});
#title2 {
text-align: center;
color: yellow;
}
.blue {
color: blue !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 id ="title2"> Weekends and Holidays Included</h2>
<button id="title2-button">Alter Second title</button>
You can use toggleClass method to do that like this,
$("#title2-button").click(function(){
$("title2").toggleClass("blue");
});
Use hasClass to check if class is present . Hope this is what you are looking for,thanks
$("#title2-button").click(function(e){
if($('#title2').hasClass('yellow'))
{
$('#title2').removeClass('yellow').addClass('blue')
}
else
$('#title2').removeClass('blue').addClass('yellow')
})
.yellow
{
color:yellow
}
.blue
{
color:blue
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="yellow" id="title2">Some content</div>
<button id="title2-button">Alter Second title</button>

how to change the attributes of child divs from the parent div through javascript?

#va{
color:yellow;
}
#v{
color:pink;
}
<div id = "va">
<div id ="v">my name is </div>
<div>khan</div>
</div>
i have tried using document.getelementbyid("va").style.color="yellow"; but the color of element v is not changing i want to change its color by the id of parent i want it to be done through javascript as it is the simple example of the situation in which i am traped plz help
$("#va>#v").css("background-color","green")
#va{
color:yellow;
}
#v{
color:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "va"> asdasd
<div id ="v">my name is </div>
<div>khan</div>
</div>
Use > the direct child selector.
The selector will select the direct child(with id v) of element with id va and change color to red
With jquery you have two options, using the .children() method or using .find() method, take a look in this snippet:
$("#va").children().css("color", "red");
//$("#va").find("#v").css("color","blue");
#va {
color: yellow;
}
#v {
color: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="va">
<div id="v">
my name is
</div>
<div>
khan
</div>
</div>
If you want to change the color of ID v, use getElementById("v") rather that getElementById("va")
document.getElementById("v").style.color = "yellow";
#va {
color: yellow;
}
#v {
color: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="va">
<div id="v">my name is </div>
<div>khan</div>
</div>
you can change the class attribute of any element and create the css to what you need using:
document.getElementById("va").setAttribute("class", "yellow-class");
css would bw something like:
.yellow-class{
color: yellow;
}
Colors styles only affect child nodes if the child node's color property is set to initial.
#va{
color:yellow;
}
#v{
color:initial;
}
However, this will remove the default pink color from your tag. There are lots of different ways you could solve this problem but the simplest would be to just create a new style rule and simply use js to add a class to #va to change the style.
#va.yellow #v {
color: yellow;
}
And use this js.
document.getElementById("va").className += " yellow";

css style loading + id. eg loading1, loading300

I have this in css:
#loading{
display:none;
}
the problem is, i need to display none this loading div, that come with an id after loading name.
eg:
<div id=loading1></div>
<div id=loading422></div>
<div id=loading9232></div>
I want to apply loading style in all this divs, can i do that? how would it be?
thank you!
I want to apply loading style in all this divs, can i do that?
Yes, with an attribute starts with selector:
[id^=loading] {
display: none;
}
That matches any element whose id attribute starts with loading.
Example:
[id^=loading] {
color: blue;
}
<div id="loading1">loading1</div>
<div id="loading12">loading12</div>
<div id="loading123">loading123</div>
<div id="notloading">notloading, so not affected</div>
<div id="loading">loading with nothing after</div>
hello freind you can put an class attribut and name it loading
like this
<div id=loading1 class="loading"></div>
<div id=loading422 class="loading"></div>
<div id=loading9232 class="loading"></div>
and call it in your css like this
.loading{
display:none;
}
that's can be better than id class is good
i hope to find that is helpfull
Try this:
div[id^=loading]{display:none;}
Refer this link for more details
Examples:
/* All spans with a "lang" attribute are bold */
span[lang] {
font-weight:bold;
}
/* All spans in Portuguese are green */
span[lang="pt"] {
color:green;
}
/* All spans in US English are blue */
span[lang~="en-us"] {
color: blue;
}
/* Any span in Chinese is red, matches simplified (zh-CN) or traditional (zh-TW) */
span[lang|="zh"] {
color: red;
}
/* All internal links have a gold background */
a[href^="#"] {
background-color:gold
}
/* All links to urls ending in ".cn" are red */
a[href$=".cn"] {
color: red;
}
/* All links to with "example" in the url have a grey background */
a[href*="example"] {
background-color: #CCCCCC;
}

How to change the color of another link on hover?

This is the simple HTML code:
<li class="main">
ImageLink <!--1st anchor tag-->
ImageName <!--2nd anchor tag-->
</li>
Is it possible to change the color of 2nd anchor tag on hover state of 1st anchor tag? (And vice versa.)
Not with css. This kind of actions can only be done by script.
If you use jQuery you could add the following script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript>
$(document).ready(function(){
var a1 = $('a:first');
var a2 = $('a:second');
a1.hover(function(){ a2.toggleClass('hover') }, function(){ a2.toggleClass('hover') });
a2.hover(function(){ a1.toggleClass('hover') }, function(){ a1.toggleClass('hover') });
});
</script>
Now you can use the hover class to specify the color:
.hover { color: red; }
Edit
It would be easier to give both a's an id, so you could reference them by using var a1 = $('#a1');.
With CSS, it's possible to change the color of the 2nd anchor tag on hover of the 1st anchor tag with a sibling selector, but I don't think you can do it vice-versa:
a:hover + a {
color: red;
}
JSFiddle preview: http://jsfiddle.net/9Ezt5/
See http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
However, note that adjacent sibling selectors are not supported on all browsers: http://www.quirksmode.org/css/contents.html
Yes you can do it with pure css.
for example:
a:hover + a{
background:red;
}
Check this for more
http://jsfiddle.net/Bw5by/
In Jquery you can do it like this,
$("#first").hover(function(){
$('#second').css('color','red')
},function(){
$('#second').css('color','blue')
});
See it in action here,
http://jsfiddle.net/gagan/NYAHY/1/
If those are the only two links in the list item tag, then you could do something like this:
li.main:hover a
{
color: red;
}
li.main a:hover
{
color: blue;
}
Then your hovered link will be blue, and all the other ones (in this case just that other one) will be red.

how do you get the specific style altered with a CSS class?

Quick one, not sure if its possible.
How can I get the specific style altered with a CSS class using jQuery/JS.
Example:
html looks like:
<tab>
<a class="anchor">a</a>
</tab>
CSS looks like:
a{border:1px}
.anchor{color:green}
So if i do something like :
$('.anchor').myReturnStyle() and it returns color or an array if there more styles in .anchor
$('.anchor').MyReturnStyleValue('color') returns 'green'
BUT
$('.anchor').returnStyleValue('border') returns false as this is not changed by .anchor Class
You can use jQuery's css(..) method to achieve this. Please note that:
Shorthand CSS properties (e.g. margin, background, border) are not supported.
Here is an example:
<div>
<a class="anchor">a</a>
</div>
<style type="text/css">
a { background-color: #000; }
.anchor{ color: green; }
</style>
<script type="text/javascript">
$(document).ready(function () {
alert($($('.anchor').get(0).nodeName).css('background-color'));
});
</script>
See the jsFiddle demo

Categories