Develop Reference

How to change an ID depending on the color of an element with Javascript

I'm trying to learn javascript on my own, so I'm lacking a lot. I'm trying to change the color of multiples elements depending on the color in the css of another element.
I want the javascript to detect the <div id> with a specific color, and then change the id of another <div id2>
I tried this :
if (document.getElementById("name").css('color') == "#7a5cd4") {
document.getElementById('border').setAttribute('id', 'red');
document.getElementById('line').setAttribute('id', 'linered');
}
#name {
font-size: 35px;
color: #7a5cd4;
}
#border {
width: 25px;
height: 25px;
border: 3px solid black;
padding: 10px;
margin: 10px;
border-radius: 100%
}
#red {
width: 25px;
height: 25px;
border: 3px solid red;
padding: 10px;
margin: 10px;
border-radius: 100%
}
#line {
width: 200px;
height: 20px;
border: 1px solid black
}
#linered {
width: 200px;
height: 20px;
border: 1px solid red
}
<center>
<div id="name">name</div>
<div id="border"></div>
<div id="line"></div>
</center>

window.getComputedStyle is a function that takes an element as a parameter and returns an object containing all of the styles that are being used on that object. We can then call getPropertyValue on the result to get the value of a css property.
These functions return colours in the form rgb(r, g, b), so we will need to compare the value to rgb(122, 92, 212), instead of #7a5cd4.
HTMLElement.style, however, would not work in your case as it only gets the inline style, which is when you specify the style in your html, like <div style="color: red">.
Also, it is recommended to use classes for selecting elements, instead of ids, as you can place multiple of them on the same element.
const element = document.getElementById('name');
const styles = window.getComputedStyle(element);
if (styles.getPropertyValue('color') == 'rgb(122, 92, 212)') {
document.getElementById('border').setAttribute('id', 'red');
document.getElementById('line').setAttribute('id', 'linered');
}

In order to change the id of element you:
document.getElementById('oldid').id = 'newid'
This rest of this answer fit to inline style (element style="color: value") while #BenjaminDavies answer fit more to your original question:
In order to check/change color property you:
var divOldColor = document.getElementById('oldid').style.color; // get the color to variable
if (divOldColor == '#7a5cd4') { // do something }
Put it all together we get something like this:
if (document.getElementById('name').style.color == '#7a5cd4') {
document.getElementById('border').id = 'red';
document.getElementById('line').id = 'linered';
}

.css() is not a vanilla JS function. Use .style.cssPropertyName instead.
if (document.getElementById("name").style.color === "#7a5cd4") {
document.getElementById('border').setAttribute('id', 'red');
document.getElementById('line').setAttribute('id', 'linered');
}

How to change the text color with .animate

I want to flash some text when it will be updated with new informations. For that I need a transition. Cause the information will be updated all 60 seconds I want to use the jQuery .animate method.
For some reason it won´t work to change the text color. Margin and other stuff works fine. Is there a way to change the textcolor linear?
$('html').click(function() {
$('div').animate({ color: 'red', 'margin': '200px' }, 700);
});
body {
background: grey;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">My Text</div>

You can achieve it by adding animated class after click event. Please check below solution:
$('html').click(function() {
$('div').addClass('animated');
});
body {
background: grey;
color: #fff;
}
.animated {
margin:200px;
color:red;
transition:all .7s;
}
and fiddle
https://jsfiddle.net/1wfnyuez/

I would suggest adding a class to apply the styling and then after a timeout - remove the class to return to the default styling. The following adds a class to transition the test div and after 2 secs remove that class.
Note that the OP and the other answers all follow the same pattern by altering the styling in the js - this is one way, but I would always suggest to leave the styling to the CSS and use the js to add / remove the styled class.
$('.test').click(function() {
$(this).addClass('active');
setTimeout(function(){
$('.test').removeClass('active');
}, 2000)
});
body {
background: grey;
}
.test {
color: #fff;
margin: 0;
transition: all 0.7s ease-in-out
}
.test.active {
color: red;
margin: 200px;
transition: all 0.7s ease-in-out
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">My Text</div>

Use jQuery-color for this. Or switch to classname transitions
$('html').click(function() {
$('div').animate({ color: 'red', 'margin': '200px' }, 700);
});
body {
background: grey;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/color/jquery.color.plus-names-2.1.2.min.js"
integrity="sha256-Wp3wC/dKYQ/dCOUD7VUXXp4neLI5t0uUEF1pg0dFnAE="
crossorigin="anonymous"></script>
<div class="test">My Text</div>

You can add additional css to change the color. Just a work-around
$(document).ready(function(){
$('html').click(function() {
$('div').animate({ 'margin': '200px'}, 700).css('color','red');
});
});

The implementation principle of the animate method in jquery is to use the timer to gradually change the attribute value according to the step size. Therefore, only the numeric attribute change is supported, and the color does not have the decimal increase or decrease, so it cannot be realized.

You can use complete callback function to change the color:
$('html').click(function() {
$('div').animate({ 'margin': '200px' }, 700, function () {
$('div').css('color', 'red');
});
});
body {
background: grey;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">My Text</div>

jquery .css background image

I have been working on my website and I'm having trouble with setting the css of my background.
This is the code that i have right now. Im trying to use only jquery and not a css file.
$('<div id="klanbot_config">').css({
position: "absolute",
left: 792,
top: -7,
width: 199,
height: 545,
border: "3px gold solid",
color: "white",
"font-size": "10px",
}).appendTo("#centerbox2");
I tried doing background: url('http://i.imgur.com/Uc3QUrs.jpg'), but that did not work.

I tried doing background: url('http://i.imgur.com/Uc3QUrs.jpg'), but that did not work.
You'd need to put the url('...') part in double-quotes:
background: "url('http://i.imgur.com/Uc3QUrs.jpg')"
Otherwise you're trying to call a function called url() and set the background to its return value.

JQuery .attr tag not working

I don't understand why .attr() will not change the background-color of div "outline" to red.
HTML CODE:
<div id="outline"></div>
CSS CODE:
#outline {
height: 300px;
width: 300px;
background-color: black;
}
JAVASCRIPT (JQUERY) CODE:
$("#outline").attr('background-color', 'blue');

background-color isn't a html attribute, it's a style attribute - use css function instead.
$("#outline").css('background-color', 'blue');
#outline {
height: 300px;
width: 300px;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outline"></div>

// To set the html style attribute, use .css()
// .css() is dedicated to set one or more
// styles at a time
$("#outline").css('background-color','blue');
// This is equivalent to the above
// .attr() is dedicated to set one or more html
// attributes at a time
$("#outline").attr('style', 'background-color:blue');
#outline {
height: 300px;
width: 300px;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outline"></div>

background-color isn't an attribute, it's a css property.
Use :
$("#outline").css('backgroundColor', 'blue');

Prevent link wrapped in h2 from being affected by class

I'm working on a button test that needs to be completed in jQuery only. The site is fairly confusing, but I think I have simplified the issue below. I am trying to apply some styles to these buttons however the class is used all over and some specific instances need to be excluded.
<body>
<div>
<a class="button primary" href="...">change me</a>
</div>
<div class="ancestorClass">
<h2>
<a class="button primary" href="...">don't touch</a>
</h2>
</div>
</body>
Currently I have the following...
jQuery("<style type='text/css'>
.change-button:before
{font-family: HPFlex2Software3ResourceIcons;
font-size: 18px;
font-style: normal;
content: \"\\e903\";
width: 10px;
top: 5px;
position: relative;
display: block;
float: left;
color: #01a982;
}
.change-button-gray:before
{
font-family: HPFlex2Software3ResourceIcons;
font-size: 18px;
font-style: normal;
content: \"\\e903\";
width: 10px;
top: 5px;
position: relative;
display: block;
float: left;
color: #707070;
}
</style>").appendTo("head");
jQuery(".button.primary").addClass("change-button").css({
"background-color": "transparent",
"color": "#000000",
}).mouseenter(function() {
$(this).removeClass("change-button");
$(this).addClass("change-button-gray");
}).mouseleave(function() {
$(this).removeClass("change-button-gray");
$(this).addClass("change-button");
});
In previous variations of tests on this site I was able to use the
following to prevent specific buttons from being affected, but because
of how the css is being added in on this variation it no longer works
for me.
$('.button.primary').filter(function() {
return $(this).closest('.ancestorClass').length === 0;})
Here is the code I was using that got the error:
$('.button.primary').filter(function() {
var parent = $(this).parent().parent();
return parent.hasClass(".ancestorClass");
.addClass("change-button").css({
"background-color": "transparent",
"color": "#000000",
}).mouseenter(function() {
$(this).removeClass("change-button");
$(this).addClass("change-button-gray");
}).mouseleave(function() {
$(this).removeClass("change-button-gray");
$(this).addClass("change-button");
})});

there's many ways to solve your problem but I will choose your idea instead of coming with a new one. Instead of using this code :
$('.button.primary').filter(function() {
return $(this).closest('.ancestorClass').length === 0;})
I suggest you to use this :
$('.button.primary').filter(function() {
var parent = $(this).parent().parent();
return parent.hasClass("ancestorClass");
});
Here's a fiddle showing how it works.
An other solution would be to use the css selector :nth-child(number) but it's less beautiful and you have to change the selector when you add or delete elements that precede the target (with the same class).