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');
}

I can't use CSS "hover" feature when I set properties on Javascript

In my website I set background color with Javascript but I can't use "hover" feature after that.
titles.forEach(titles => {
document.getElementById(titles).style.backgroundColor = "#7dd5f8";
document.getElementById(titles).style.color = "black";
});
that's my Javascript code.
.titles:hover{
border: 1px solid black;
background-color: #a0e1fa;}
and that's my CSS code.

Try it please. It should work.
I added just one class in css.
.titles:hover{
border: 1px solid black;
background-color: #a0e1fa !important;}
.bg_7dd5f8 { background-color: #7dd5f8; }
And js code is here;
titles.forEach(titles => {
document.getElementById(titles).classList.add('bg_7dd5f8 ');
document.getElementById(titles).style.color = "black";
});

Remove CSS hover functionality using Javascript

I need to remove CSS hover functionality using JavaScript.
I have a button on a form which submits data to our db server. Using OnClientClick() of an ASP.NET Button control I would like to change the element's text to 'Submitting..' using getElementById(), change the background color of the button to Light Grey and more importantly disable the following .button:hover effect I have in my CSS.
.button:hover,
.content-form input.button:hover,
#comment-form #submit:hover
{
background-color: #333;
}
All I am really interested in is the Javascript to remove/disable the above CSS
e.g. OnClientClick="getElementByID('ButtonName').blahblahblah;"

Working fiddle: https://jsfiddle.net/bm576q6j/17/
var elms = document.getElementsByClassName("test");
var n = elms.length;
function changeColor(color) {
for(var i = 0; i < n; i ++) {
elms[i].style.backgroundColor = color;
}
}
for(var i = 0; i < n; i ++) {
elms[i].onmouseover = function() {
changeColor("gray");
};
}
Edit: Sorry for not noticing last part of your question before I answered :)

There are a lot of solutions for solving your problem.
For example:
1- Using HTML disabled attribute.
OnClientClick="getElementByID('ButtonName').disabled=true;
2- Add a class which overrides the previous style.
.button:hover,
.content-form input.button:hover,
#comment-form #submit:hover
{
background-color: #333;
}
.button.submitted:hover
{
background-color: gray;
}
Js:
OnClientClick="getElementByID('ButtonName').className = "submitted";
and etc

In this case it removes the class attribute eliminating all defined classes, but then adds that should not be removed.
On jsfiddle
function disableHover(elem) {
elem.removeAttribute('class');
elem.setAttribute('class', 'another');
}
.button:hover {
background-color: #333;
}
.another {
background-color: lightgray;
}
<button class="button" onclick="disableHover(this);">hover</button>
But the best way of doing this is so, simple and works well.
function disableHover(elem) {
elem.classList.remove('button');
elem.classList.add('another');
}
.button:hover {
background-color: #333;
}
.another {
background-color: lightgray;
}
<button class="button" onclick="disableHover(this);">hover</button>
On jsfiddle

First of all your css is wrong. It should be:
.button:hover, .content-form input.button:hover, #comment-form, #submit:hover {
background-color: #333;
}
and you are adding css with id and class. You should not do that. Just add with class and use document.getElementById('submit').removeAttribute('class')

Radio merging with label?

I want After click on the radio,
Radio-selected that background color is yellow putting background lable, with use of css3?(If possible use of CSS, otherwise use of jQuery)
Example of myself: http://jsfiddle.net/DVJmS/8/
Example of ui: http://jqueryui.com/demos/button/radio.html -> i not want use of plugin this is only a example.
With respect

I'd offer you the following, which seems to achieve your aims. Though I removed the styling from the input radios, just to simplify things a little (visually, at least):
$('input:radio').click(
function(){
$('label.checked').removeClass('checked');
var labelFor = this.id;
$('label[for="' + labelFor + '"]').addClass('checked');
});
With the CSS:
label {
padding: 0.2em 0.5em;
border: 1px solid #ccc;
cursor: pointer;
}
label.checked {
background-color: #ffa;
font-weight: bold;
}
input[type=radio] {
display: none;
}
JS Fiddle demo.
Revised JS Fiddle demo, just for a little added prettiness.

Inherit/Extend CSS properties onto another element

What's the most efficient way in jQuery to extend/inherit CSS properties from one element to another?
Desired effect
$('#blah').extendCSSTo('#me') // Is there a plugin or a good way to do this?
$('#me').css({ background: 'blue' });
#me will now have all the CSS of #blah and also background
CSS:
#blah {
padding: 5px;
width: 200px;
height: 20px;
border: 1px solid #333;
font-family: "Verdana";
}
#me {
position: absolute;
left: 5px;
top: 5px;
}
<div id="blah"></div>
<div id="me">test</div>
Edit: This will be used in a plugin so using classes and simply doing .addClass is not an option
I'm looking for the same effect as setting default value for plugin options, but instead for CSS:
$.extend([css object], [#blah css object], [#me css object])

$('#me').addClass('class');
This works, not sure if you can use the css relative to an ID though.

Try this.
function CloneStyle(sourceID, targetID){
var myStyle;
var source = document.getElementById(sourceID);
var target = document.getElementById(targetID);
if (window.getComputedStyle) {
myStyle = window.getComputedStyle(source).cssText;
}
else if (source.currentStyle) {
myStyle = $.extend(true, {}, source.currentStyle);
} else {
throw "antique browser!";
}
target.style.cssText = myStyle;
}
Now call like.
CloneStyle("blah", "me");
$('#me').css({ background: 'blue' });
Fiddle here: http://jsfiddle.net/naveen/3FdDp/

If you were to use CSS classes rather than ID references you could do the following:
$("#me").addClass($("#blah").attr("class"));
Which would copy the classes from #blah to #me