I have two div elements, with different colors, the first one have for example red color and the second one have blue color, so now, I want to change the color of div with red to blue color, so how could I do it with javascript?
here you go: if you want to animate the change, do it in css
https://jsfiddle.net/5tbfw1wu/
document.getElementById("toRed").style.backgroundColor = "red";
Related
I have an input element which allows users to set the background colour of the input element.
When the user sets the background colour of the input element, I want the text in the input element to be a contrasting colour to the original colour.
For example: The user inputs "black" as the input background colour; then the text colour of the input will be white. However if the user inputs "white" as the input colour, the text colour would be black. (There are more cases than just black or white.)
How would I achieve this? I know that you can use another element on top of a background and set mix-blend-mode, but I don't want to because that would remove the point of the input.
Thanks!
You could calculate if black or white would have a higher contrast with the color given by the user based on the hexadecimal value of the color.
This link goes into detail on two ways to do this calculation.
https://24ways.org/2010/calculating-color-contrast/
I have a svg rect element. I have "fill: rgb(31, 119, 180);" which renders the rect on the left side of image below.
How can I set the rect style to render the multiple borders like the one on right?
This isn't possible. Instead, you could use a second rectangle. The first one would have a white background with a black border, and the interior one would be blue. Or the first one could just be black, and the interior one would be blue with a white stroke.
I have a question about my HTML5 canvas, how can I change the color of a shape using HEX?
I have been able to change the color and size of a text but I would like to do the same to a shape, in this case a circle.
Right now you enter a text in a textbox and you can change color and size.
Also, I want to be able to click on the canvas to paint one circle, then change color and make another circle in a different color than the first one.
My code for the text jsfiddle.net/e43nfx1d/4/
My code for the circle jsfiddle.net/w8wsv7sr
It was pretty easy to do the changes on the text but now, with the circle, Im totally lost.
/Wilma
As I realized your question, your problem is to changing the color of filled circle.
There isn't any big problem here; You can change it as the same way of changing the text color.
Just like this:
context.fillStyle = "#333";
// Or any other color format that css supports
Here's your working example: http://jsfiddle.net/76koy1x7/
I am adding a div dynamically and adding background colors to these divs. The background color values are coming from the backend, so one div for each colour is added and its background colour is set to that colour. But if some colour that is not valid for CSS background color property comes through, it shows as a white background.
For example 'Leopard' colour. Is there any way to validate colous and not add the div if the color is not a valid background colour?
Make a list from the W3 Specifications.
Then check to see if your color is in that list. Here is an example.
colors = ['lime', 'orange', 'pink'];
if (colors.indexOf(the_color) >= 0) {
// Set background
}
I would absolutely avoid using named colours (eg. red, white, etc...) while using instead the standard hex declaration, eg:
#FF0000 = #F00 = red
#000000 = #000 = black
#ffffff = #fff = white
#ac25B1 = some other *unnamed* colour
This way, you could easily check that the string is a valid HEX string, either 6 or 3 character long.
I think you could re-use this question's solution.
It involves a jQuery script that checks if the submitted color really produces RGB values. I'm copy-pasting it.
colorToTest = 'lime'; // 'lightgray' does not work for IE
$('#dummy').css('backgroundColor', 'white');
$('#dummy').css('backgroundColor', colorToTest);
if ($('#dummy').css('backgroundColor') != 'rgb(255, 255, 255)' || colorToTest == 'white') {
alert(colorToTest+' is valid');
}
Here's how it works:
First, the colorToTest variable is set to the color you wish to validate;
Then, the background of the target div (#dummy in this case) is set to white via jQuery;
At last, the background of the target div is set to colorToTest.
If the color is still white, and colorToTest is not White, the backend color is not valid.
However, since an unvalid color won't produce any layout, you could just set the div background to white and then apply the backend color. If it's vaild, it will change. You could however use the above script to validate it, if you wish.
I have a menu made up of icons and labels. When an icon is clicked the relevant label turns blue. I've recently heard about a technique called swapping pixels, and I wondered if it was possible to make the icon turn blue also?
Pure Javascript if possible!
This is the code that I have at the moment...
function init() {
[].forEach.call(document.querySelectorAll('.navico'), function(el) {
el.addEventListener('click', imageButtonClickHandler);
});
function imageButtonClickHandler() {
this.id.search("aboutnav");
if(this.id.match("aboutnav")) {
grey();
var a = document.getElementById("a");
a.style.color = 'blue';
a.style.fontSize = '15px';
}
the function 'grey' that gets called in the function above is JQuery and was created by my partner so I don't understand it, but it basically turns the selected menu option back to grey after it is deselected or a different icon is clicked.
Thanks in advance.
If the icon is an image, there isn't a way to use JavaScript to modify the image directly. There are, however, techniques for modifying how images look by using other images.
For example, if "turning the icon blue" meant that you wanted to change a specific pattern of colors in the icon you could create another image with just the parts you want to turn blue and everything else in the image transparent (think cut-out). Then, position the image at the same location as your icon with a higher z-index but set its visibility:hidden (or display:none, if you'd rather). Then turning the image blue would just mean showing the image.
If turning the icon blue meant that you wanted it to just have a blue "tinge" to it, you could create a semi-transparent png and use the same technique. You could also accomplish a blue tinge by just creating an element (say a div) and setting the background color to blue, then setting the transparency. In this way you could choose arbitrary colors instead of having to create an image for each color you wanted to use.